我是 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);

谁能指出我做错了什么？

最佳答案

当你 join data通过 selection.data 进行选择，数据数组中的元素数量应与选择中的元素数量相匹配。您的数据数组有两个元素(对于 Jim 和 Ray)，但您将其绑定(bind)到的选择只有一个 SVG 元素。您是要创建多个 SVG 元素，还是将 Jim 和 Ray 的得分矩形放在同一个 SVG 元素中？

如果要将两个数据元素绑定(bind)到单个 SVG 元素，可以将数据包装在另一个数组中:

var chart = d3.select("#charts").append("svg")
    .data([data])
    .attr("class", "chart")
    …

或者，使用 selection.datum ，直接绑定(bind)数据而不计算连接:

var chart = d3.select("#charts").append("svg")
    .datum(data)
    .attr("class", "chart")
    …

如果您想为每个人创建多个 SVG 元素，那么您需要一个数据连接:

var chart = d3.select("#charts").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("class", "chart")
    …

第二个问题是你不应该使用 d3.values带数组；该函数用于提取对象的值。假设您希望每个人有一个 SVG 元素(因此，在本例中为两个)，那么 rect 的数据就是该人的相关分数:

var rect = chart.selectAll("rect")
    .data(function(d) { return d.scores; })
  .enter().append("rect")
    …

如果您还没有，我建议您阅读这些教程:

• Thinking with Joins
• Nested Selections

https://stackoverflow.com/questions/10086167/