文章目錄

• 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。