相关疑难解决方法(0)

我正在阅读D3.js文档,并且发现很难从文档中理解该selection.data方法.

这是文档中给出的示例代码:

var matrix = [
  [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; });

我理解大部分内容,但声明.data(function(d) { return d; })部分的内容是var td什么？

我最好的猜测如下:

• 该var tr语句已将四元素数组绑定到每个tr节点
• 的var td语句然后使用该四元件阵列作为其数据,以某种方式

但.data(function(d) { return d; })实际上如何获得这些数据,以及它返回了什么？

我是D3的新手,花了几个小时才找到处理结构化数据的任何事情,但没有积极的结果.我想使用下面的数据结构创建一个条形图.条形图(水平)绘制,但仅适用于用户"jim".

var data = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

var chart = d3.select("div#charts").append("svg")                                   
              .data(data)
              .attr("class","chart")
              .attr("width",800)
              .attr("height",350);

chart.selectAll("rect")    
    .data(function(d){return d3.values(d.scores);})    
    .enter().append("rect")
    .attr("y", function(d,i){return i * 20;})
    .attr("width",function(d){return d;})
    .attr("height", 20);

谁能指出我做错了什么？

我经常看到.datum使用区域图表时.例如:

svg = d3.select("#viz").append("svg").datum(data)

.datum需要什么时候有任何经验法则吗？

var area = d3.svg.area()  
    .x(function(d) { return x(d.x); })  
    .y0(height)  
    .y1(function(d) { return y(d.y); });  

var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  

svg.append("path") 
    .datum(data)
    .attr("d", area);