如何调用嵌套JSON数据（d3js）中的所有值

Question

我有构造为JSON的数据，看起来像这样（实际数据要大得多，每个实例具有更多的变量和属性）：

var json = [
{
    "CLIN": "1",
    "cost": 257,
},
{
    "CLIN": "1",
    "cost": 846,
},
{
    "CLIN": "2",
    "cost": 162         
},
{
    "CLIN": "2",
    "cost": 984
}]

这是我的JS代码如下所示：

   <script>
        var margin = {top: 20, right: 160, bottom: 35, left: 30};

        var width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var svg = d3.select('body')
                    .append('svg')
                    .attr('width', width + margin.left + margin.right)
                    .attr('height', height + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate('+ margin.left + "," + margin.top + ")");

        var dataByCLIN = d3.nest()
            .key(function(d) {return d.CLIN; })
            .entries(json);

  </script>

这样就可以通过CLIN属性成功嵌套数据。 但是，当我尝试传递所有四个变量以为条形图创建四个矩形时，它不返回任何值

        var bars = svg.selectAll('rect')
                    .data(dataByCLIN)
                    .enter()
                        .append('rect')
                        .attr('width', function(d) { return d.values.cost; })
                        .attr('height', 10)
                        .attr('y', function(d, i) { return i * 20; });

如果我使用各种数组选择运行以下代码：

console.log(dataByCLIN[0].values[0].cost)

它返回我需要的值，但是代码：

.attr('width', function(d, i, j) { return d[i].values[j].cost; 

是无效的。 控制台抛出错误

Cannot read property 'values' of undefined

我知道如何选择所需的数据，但不知道将数据传递给d3函数的正确格式。

Answer 1

你可以做的是使用for/forEach为您的数据dataByCLIN创造rects这样每个循环中：

var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d,i1) {
  bars.data(d.values).enter().append('rect').attr('class', 'rects')
    .attr('width', function(d) {
      return d.cost;
    })
    .attr('height', 10)
    .attr('y', function(d, i) {
      return (i+i1+i1+1) * 20 - 20;
    });
});

这是一个小提琴：

 var json = [{ "CLIN": "1", "cost": 257, }, { "CLIN": "1", "cost": 846, }, { "CLIN": "2", "cost": 162 }, { "CLIN": "2", "cost": 984 } ]; var margin = { top: 20, right: 160, bottom: 35, left: 30 }; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + "," + margin.top + ")"); var dataByCLIN = d3.nest() .key(function(d) { return d.CLIN; }) .entries(json); var bars = svg.selectAll('.rects'); dataByCLIN.forEach(function(d, i1) { bars.data(d.values).enter().append('rect').attr('class', 'rects') .attr('width', function(d) { return d.cost; }) .attr('height', 10) .attr('y', function(d, i) { return (i + i1 + i1 + 1) * 20 - 20; }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>