<!DOCTYPE html>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
<svg class="chart" width="420" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>
<script>
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [4, 8, 15, 16, 23, 42];
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
D3 是Javascript函式庫
d3.selectAll("p").style("color", "white");
//->
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
D3 動態設定Data屬性
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
D3 Enter and Exit
http://www.ourd3js.com/wordpress/149/ Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.
// Update…
var p = d3.select("body")//有資料對應到<p>
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter()//有資料但沒有<p>
.append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();//沒有用到的<p>
DATA為 [4, 8, 15, 16, 23, 42]，將此資料綁定到三個 p 元素的選擇集上。可以想像，會有3個數據沒有元素與之對應，這時候 D3 會建立3個空的元素與數據對應，稱為 Enter。而有元素與數據對應的部分稱為 Update。如果將此資料綁定到8個 p 元素的選擇集上，則會有2個元素沒有數據綁定，那麼沒有數據綁定的部分被稱為 Exit。示意圖如下所示。
Transitions
d3.select("body").transition()
.style("background-color", "black");
d3.selectAll("circle").transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });
SVG
Scalable Vector Graphics
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="467" height="462">
<!-- This is the red square: -->
<rect x="80" y="60" width="250" height="250" rx="20" fill="red"
stroke="black" stroke-width="2px" />
<!-- This is the blue square: -->
<rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
stroke="black" stroke-width="2px" fill-opacity="0.7" />
<rect x="180" y="160" width="250" height="250" rx="40" fill="blue"
stroke="green" stroke-width="2px" fill-opacity="0.7" />
</svg>
Loading Data
var a;
D3 APIs
| Modules | Functions |
|---|---|
| Selections | Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces |
| Operations | Zooming, Dragging |
| Transitions | Transitions, Timer |
| Arrays | Statistics, Search, Transformations, Histograms |
| Collections | Objects, Maps, Sets, Nests |
| Axes | d3.axisBottom, axis.tickFormat |
| Painting | Brushes, Chords, Paths, Polygon |
| Graphs | Colors, Hierarchies, Voronoi Diagrams, Quadtrees |
| Shapes | Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks |
| Scales | Continuous, Sequential, Quantize, Ordinal |
| Geographies | Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms |
| Shapes | Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks |
| Math | Number Formats, Random Numbers |
| Time | Time Intervals, Time Formats, |
var a;
Tutorial Step 1: Draw Bars
var w= 535;
var h= 250;
var svg= d3.select('.gardenDiv')
.append('svg')
.attr('width', w)
.attr('height', h);
svg.selectAll('rect.colorBar')
.data(data)
.enter()
.append('rect')
.attr('width', function(d,i){
return d.width
})
.attr('height', function(d,i){
return d.height*2
})
.attr('x', function(d,i){
return i * (d.width+2)
})
.attr('y', function(d,i){
return h - d.height*2
})
.attr('fill', 'white')
Transitions
var a;
Transitions
var a;
Transitions
var a;
Transitions
var a;
Transitions
var a;
Transitions
var a;