文章目录
SVG
<svg width="50" height="50">
<rect x="0" y="0" width="50" height="50" fill="green" />
</svg>
<svg width="50" height="50">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>
<svg width="50" height="50">
<ellipse cx="25" cy="25" rx="15" ry="10" fill="red" />
</svg>
<svg width="50" height="50">
<line x1="5" y1="5" x2="40" y2="40" stroke="gray" stroke-width="5" />
</svg>
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points="05,30
15,30
15,20
25,20
25,10
35,10" />
</svg>
<svg width="50" height="50">
<polygon fill="yellow" stroke="blue" stroke-width="2"
points="05,30
15,10
25,30" />
</svg>
Adding a DOM Element
在body的尾部添加一个
的空标签
d3.select("body").append("p");
Adding an SVG Element
在body的尾部添加一个svg的标签,再添加一个circle标签
d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
d3.select("body")
.append("svg")
.attr("width", 50)
.attr("height", 50)
.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 25)
.style("fill", "purple");
var bodySelection = d3.select("body");
var svgSelection = bodySelection.append("svg")
.attr("width", 50)
.attr("height", 50);
var circleSelection = svgSelection.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 25)
.style("fill", "purple");
Binding Data to DOM Elements
在body里添加3个p标签,内容均为hello
var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
.text("hello ");
Using Data Bound to DOM Elements
在body里添加3个p标签,内容为theData的内容
var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
.text( function (d) { return d; } );