selection.data

selection.data([values[, key]])   //在计算相关的连接时，取得或设置一组元素的数据。

连接指定的一组数据的和当前选择。指定的values是一组数据值（例如，数字或对象）或一个函数返回一组值。如果没有指定key函数，则values的第一数据被分配到当前选择中第一元素，第二数据分配给当前选择的第二个元素，依此类推。当数据被分配给一个元素，它被存储在属性data中，从而使数据“沾粘”，从而使数据可以再选择。

data操作的结果是update选择;这表示选择的DOM元素已成功绑定到指定的数据元素。update选择还包含对enter和exit的选择，对应于添加和删除数据节点。有关详细信息，请参阅简短的教程关于连接的思考

key函数可以被指定为控制数据是如何连接元素。这取代默认的by-index行为;key函数被新数据数组中的每个元素调用一次，并再次用于选择中的每个元素。在这两种情况下的key函数是通过传递数据d与索引i。当key 函数上被新的数据元素评价时，this上下文是数据数组；当key 函数被现有选择评估时，this上下文是相关的DOM元素。key函数，基于先前结合的数据返回一个用于连接数据和相关的元素的字符串。例如，如果每个数据都有一个唯一的字段name，该连接可以被指定为.data(data, function(d) { return d.name; })。如果指定了key函数，data操作符也影响节点的索引；该索引被作为第二个参数i作为任何运算符函数的参数。然而，请注意，现有的DOM元素不自动重新排序；根据需要使用sort或order函数。有关key函数如何影响数据连接的更详细的示例，请参阅教程条形图2

这个values选择中的每组数据。因此，如果选择具有多个组（例如，一个d3.selectAll后跟一个selection.selectAll)），然后data应该被指定为一个函数，该函数返回一个数组（假设你对每个组想要不同的数据）。该函数将被传递的当前组数据（或undefined）和索引，组的this上下文。 例如，可以将一个二维数组和初始选择绑定，然后将包含的内部数组和每个子选择绑定。在这种情况下，values函数是标识函数：它被每个组中的子元素调用，被传递绑定到父元素的数据，并且返回这个数据数组。

eg:

var data = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
var tr = d3.select("body").append("table").selectAll("tr")
          .data(matrix)
          .enter().append("tr");

var td = tr.selectAll("td")
      .data(function(d) { return d; })
      .enter().append("td")
      .text(function(d) { return d; });


 eg2:
 var data=[10,15,30,45,43,45];
    var colors = ["#9467bd","#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
    var pie=d3.layout.pie();
    var width=500,
        height=500;
    var outerRadius=width/2;  
    var innerRadius=150;//内半径

    var arc=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
    var svg=d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height)

    var arcs=svg.selectAll("g")
        .data(pie(data))
        .enter().append("g")
        .attr("class","arc")
        .attr("transform","translate("+outerRadius+","+outerRadius+")");

    arcs.append("path")
        .attr("fill",function(d,i){
            return colors[i];
        })
        .attr("d",arc);

    arcs.append("text")
    .attr("transform",function(d){
    return "translate("+arc.centroid(d)+")";   //定位文字到图形的中心
    })
    .attr("text-anchor","middle")    //文字居中
    .attr("fill","#fff")
    .attr("font-size","24px")
    .text(function(d){
    return d.value;
    })