D3js（一）: d3js和DOM

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,30
                    15,30
                    15,20
                    25,20
                    25,10
                    35,10" />
</svg>

<svg width="50" height="50">
  <polygon fill="yellow" stroke="blue" stroke-width="2"
           points="05,30
                   15,10
                   25,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; } );