D3 - 如何处理JSON数据结构？

Question

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

谁能指出我做错了什么？

Answer 1

当你加入数据通过为选择selection.data,你的数据数组中元素的个数应该与选择元件的数量.您的数据数组有两个元素(对于Jim和Ray),但是绑定它的选择只有一个SVG元素.您是在尝试创建多个SVG元素,还是将Jim和Ray的得分值放在同一个SVG元素中？

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

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

或者,使用selection.datum,它直接绑定数据而不计算连接:

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

如果您还没有,我建议您阅读以下教程:

• 加入思考
• 嵌套选择