文章目录
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];
2
3 var svgContainer = d3.select("body").append("svg")
4 .attr("width", 200)
5 .attr("height", 200);
6
7 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"}];
5
6 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 Container
2 var svgContainer = d3.select("body").append("svg")
3 .attr("width", 200)
4 .attr("height", 200);
5
6//Draw the Circle
7 var circle = svgContainer.append("circle")
8 .attr("cx", 30)
9 .attr("cy", 30)
10 .attr("r", 20);
1//Make an SVG Container
2 var svgContainer = d3.select("body").append("svg")
3 .attr("width", 200)
4 .attr("height", 200);
5
6//Draw the Rectangle
7 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 Container
2 var svgContainer = d3.select("body").append("svg")
3 .attr("width", 200)
4 .attr("height", 200);
5
6//Draw the Ellipse
7 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 Container
2 var svgContainer = d3.select("body").append("svg")
3 .attr("width", 200)
4 .attr("height", 200);
5
6//Draw the line
7 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 line
2 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}];
5
6//This is the accessor function we talked about above
7 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>
6
7//To
8<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");