D3js（二）: d3js基础

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");

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