D3 - 如何处理JSON数据结构？ [英] D3 - how to deal with JSON data structures?

问题描述

我是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 （rect）
 .attr（y，function（d，i）{return i * 20;}）
 .attr（width，function（d）{return d; ）
 .attr（height，20）; 
  

任何人都可以指出我做错了什么？

解决方案

当您通过加入数据加入选择时， https://github.com/mbostock/d3/wiki/Selections#wiki-data\">selection.data ，数据数组中的元素数应与选择中的元素数量相匹配。您的数据数组有两个元素（对于Jim和Ray），但您绑定它的选择只有一个SVG元素。您是否正在尝试创建多个SVG元素，或者将Jim和Ray的得分矩形放在同一个SVG元素中？

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

  var chart = d3.select（＃charts）。 append（svg）
 .data（[data]）
 .attr（class，chart）
 ... 
  pre> 
 
 
或者，使用 selection.datum < a>，它直接绑定数据而不计算连接：
  var chart = d3.select（＃charts）。 （svg）
 .datum（data）
 .attr（class，chart）
 ... 
  
如果你想为每个人创建多个SVG元素，那么你需要一个数据加入：
  var chart = d3.select（＃charts）。selectAll（svg）
 .data（data）
 .enter ）
 .attr（class，chart）
 ... 
  
第二个问题是，您不应该对数组使用 d3.values ;该函数用于提取对象的值。假设你想要每个人一个SVG元素（所以，在这个例子中为两个），那么rect的数据就是那个人的相关分数：
  var rect = chart.selectAll（rect）
 .data（function（d）{return d.scores;}）
 .enter b $ b ... 
  
如果你还没有，我建议阅读这些教程：
 
 
 
 
 
 加入思考 
 
 
 嵌套选择 
 
 
 
I'm new to D3, and spent already a few hours to find out anything about dealing with structured data, but without positive result.
I want to create a bar chart using data structure below.
Bars are drawn (horizontally), but only for user "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);
Could anyone point what I did wrong?
解决方案
When you join data to a selection via selection.data, the number of elements in your data array should match the number of elements in the selection. Your data array has two elements (for Jim and Ray), but the selection you are binding it to only has one SVG element. Are you trying to create multiple SVG elements, or put the score rects for both Jim and Ray in the same SVG element?

If you want to bind both data elements to the singular SVG element, you can wrap the data in another array:
var chart = d3.select("#charts").append("svg")
    .data([data])
    .attr("class", "chart")
    …
Alternatively, use selection.datum, which binds data directly without computing a join:
var chart = d3.select("#charts").append("svg")
    .datum(data)
    .attr("class", "chart")
    …
If you want to create multiple SVG elements for each person, then you'll need a data-join:
var chart = d3.select("#charts").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("class", "chart")
    …
A second problem is that you shouldn't use d3.values with an array; that function is for extracting the values of an object. Assuming you wanted one SVG element per person (so, two in this example), then the data for the rect is simply that person's associated scores:
var rect = chart.selectAll("rect")
    .data(function(d) { return d.scores; })
  .enter().append("rect")
    …
If you haven't already, I recommend reading these tutorials:


Thinking with Joins
Nested Selections


                        
这篇关于D3  - 如何处理JSON数据结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！