文章目錄

• Creating SVG Elements Based on Data
• Using the SVG Coordinate Space（坐標系）
• json數組簡化
• SVG Basic Shapes and D3.js
• SVG Paths and D3.js
• SVG Group Element and D3.js
• SVG Text Element
• 來源：https://www.dashingd3js.com/table-of-contents

Creating SVG Elements Based on Data

在body添加svg添加三個circle

circleRadii = [40, 20, 10]var svgContainer = d3.select("body").append("svg").attr("width", 600).attr("height", 100);var circles = svgContainer.selectAll("circle").data(circleRadii).enter().append("circle")var circleAttributes = circles.attr("cx", 50).attr("cy", 50).attr("r", function (d) { return d; }).style("fill", function(d) {var returnColor;if (d === 40) { returnColor = "green";} else if (d === 20) { returnColor = "purple";} else if (d === 10) { returnColor = "red"; }return returnColor;});

Using the SVG Coordinate Space（坐標系）

1 var spaceCircles = [30, 70, 110];23 var svgContainer = d3.select("body").append("svg")4 .attr("width", 200)5 .attr("height", 200);67 var circles = svgContainer.selectAll("circle")8 .data(spaceCircles)9 .enter() 10 .append("circle"); 11 12 var circleAttributes = circles 13 .attr("cx", function (d) { return d; }) 14 .attr("cy", function (d) { return d; }) 15 .attr("r", 20 ) 16 .style("fill", function(d) { 17 var returnColor; 18 if (d === 30) { returnColor = "green"; 19 } else if (d === 70) { returnColor = "purple"; 20 } else if (d === 110) { returnColor = "red"; } 21 return returnColor; 22 });

json數組簡化

1 var jsonCircles = [2 { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },3 { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},4 { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];56 var svgContainer = d3.select("body").append("svg")7 .attr("width", 200)8 .attr("height", 200);9 10 var circles = svgContainer.selectAll("circle") 11 .data(jsonCircles) 12 .enter() 13 .append("circle"); 14 15 var circleAttributes = circles 16 .attr("cx", function (d) { return d.x_axis; }) 17 .attr("cy", function (d) { return d.y_axis; }) 18 .attr("r", function (d) { return d.radius; }) 19 .style("fill", function(d) { return d.color; });

SVG Basic Shapes and D3.js

//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3 .attr("width", 200)4 .attr("height", 200);56//Draw the Circle7 var circle = svgContainer.append("circle")8 .attr("cx", 30)9 .attr("cy", 30) 10 .attr("r", 20);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3 .attr("width", 200)4 .attr("height", 200);56//Draw the Rectangle7 var rectangle = svgContainer.append("rect")8 .attr("x", 10)9 .attr("y", 10) 10 .attr("width", 50) 11 .attr("height", 100);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3 .attr("width", 200)4 .attr("height", 200);56//Draw the Ellipse7 var circle = svgContainer.append("ellipse")8 .attr("cx", 50)9 .attr("cy", 50) 10 .attr("rx", 25) 11 .attr("ry", 10);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3 .attr("width", 200)4 .attr("height", 200);56//Draw the line7 var circle = svgContainer.append("line")8 .attr("x1", 5)9 .attr("y1", 5) 10 .attr("x2", 50) 11 .attr("y2", 50);

SVG Paths and D3.js

Paths的意思是路徑，也就是起點-next-next…-終點
moveto，lineto，horizontal lineto，vertical lineto，curveto，shorthand/smooth curveto

1<svg width="100" height="100"> 2 <path d=" M 10 25 3 L 10 75 4 L 60 75 5 L 10 25" 6 stroke="red" stroke-width="2" fill="none" /> 7</svg>1//The data for our line2 var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},3 { "x": 40, "y": 10}, { "x": 60, "y": 40},4 { "x": 80, "y": 5}, { "x": 100, "y": 60}];56//This is the accessor function we talked about above7 var lineFunction = d3.svg.line()8 .x(function(d) { return d.x; })9 .y(function(d) { return d.y; }) 10 .interpolate("linear"); 11 12//The SVG Container 13 var svgContainer = d3.select("body").append("svg") 14 .attr("width", 200) 15 .attr("height", 200); 16 17//The line SVG Path we draw 18 var lineGraph = svgContainer.append("path") 19 .attr("d", lineFunction(lineData)) 20 .attr("stroke", "blue") 21 .attr("stroke-width", 2) 22 .attr("fill", "none");

SVG Group Element and D3.js

1<svg width="200" height="200">2 <g>3 <circle cx="20" cy="20" r="20" fill="green" />4 <circle cx="70" cy="70" r="20" fill="purple" />5 </g>6 <g>7 <rect x="110" y="110" height="30" width="30" fill="blue" />8 <rect x="160" y="160" height="30" width="30" fill="red" />9 </g> 10</svg>1//Going from:2<g>3 <circle cx="20" cy="20" r="20" fill="green" />4 <circle cx="70" cy="70" r="20" fill="purple" />5</g>67//To8<g transform="translate(80,0)">9 <circle cx="20" cy="20" r="20" fill="green" /> 10 <circle cx="70" cy="70" r="20" fill="purple" /> 11</g>

SVG Text Element

1<svg width="100" height="100">2 <circle cx="20" cy="20" r="20" fill="green" />3 <circle cx="70" cy="70" r="20" fill="purple" />4 <text x="20" y="20"5 font-family="sans-serif"6 font-size="20px"7 text-anchor="middle"8 fill="red">Hello!</text>9</svg>11//Add the SVG Text Element to the svgContainer 12var text = svgContainer.selectAll("text") 13 .data(circleData) 14 .enter() 15 .append("text");17//Add SVG Text Element Attributes 18var textLabels = text 19 .attr("x", function(d) { return d.cx; }) 20 .attr("y", function(d) { return d.cy; }) 21 .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; }) 22 .attr("font-family", "sans-serif") 23 .attr("font-size", "20px") 24 .attr("fill", "red");

來源：https://www.dashingd3js.com/table-of-contents

總結

以上是生活随笔為你收集整理的D3js（二）: d3js基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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