文章目录

• SVG
• Adding a DOM Element
• Adding an SVG Element
• Binding Data to DOM Elements
• Using Data Bound to DOM Elements

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,3015,3015,2025,2025,1035,10" /> </svg><svg width="50" height="50"><polygon fill="yellow" stroke="blue" stroke-width="2"points="05,3015,1025,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; } );

总结

以上是生活随笔为你收集整理的D3js（一）: d3js和DOM的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。