循环遍历多个对象中的对象数组，并使用下划线访问D3中的值

Question

在D3d.js ，我尝试为数组中的每个对象附加矩形，因此矩形的高度由值确定。 另外，我正在尝试使其仅显示每个数组中的第一个对象，然后单击按钮时，它将在第二个和第三个 object循环。

但是我在遍历数据时遇到问题，因为不确定如何使用此JSON结构-

  var data= {
    "Object_one":[
        {"date":"1/4/2010",
         "value":"50",},
        {"date":"6/22/2010",
         "value":"44",},
        {"date":"9/18/2010",
         "value":"42",},
    ],
    "Object_two":[
        {"date":"1/4/2010",
         "value":"54",},
        {"date":"6/22/2010",
         "value":"41",},
        {"date":"2012",
         "value":"42",},
    ],
    "Object_three":[
        {"date":"1/4/2010",
         "value":"55",},
        {"date":"6/22/2010",
         "value":"43",},
        {"date":"9/18/2010",
         "value":"65",},
    ]
}

我使用underscore.js设置了一个循环来遍历数据，但是它只接收第一个数组的所有对象，而不是每个Object X的每个array中的第一个对象 。

https://jsfiddle.net/vw88/6Ljekv45/

（有关将矩形附加值的部分，请参见js的第55行）

Answer 1

数据绑定到rect的方式不正确：

var levels = levelsHolder.selectAll('rect.square-levels')
.data(data[key])

结果是分配data["Object one"] ，然后分配data["Object one"] data["Object two"] ，依此类推，在第一次迭代中仅针对data["Object one"]输入rects ，即3个rects，并且由于没有使用更新方法，因此rects保持原样，因为它们将导致3个与data["Object one"]数组元素相对应的矩形。

一种解决方案是使用data的键并按如下所示映射数组的第一个元素：

var levels = levelsHolder.selectAll('rect.square-levels')
.data(Object.keys(data).map(function(k) { return data[k][0]; }))

现在，我很高兴为您提供按钮单击的功能（开个玩笑）。 无论如何，我正在使用两个变量“ initial”和“ max”，它们从0到数据中的最大数组长度，因此将绑定的数据更改为rect。 是的，也可以使用underscore.js来完成，但是我在这里没有找到它的需要。

点击按钮：

d3.select('#myButton').on('click', function() {
   initial++;
   if(initial > max) { initial = 0; }
   levels.data(Object.keys(data).map(function(k) { return data[k][initial]; }));

   drawSquares();
});

这是使用上述逻辑的代码片段（虽然不是最好的逻辑，但是您可以根据需要进行更改）：

 var data= { "Object one":[ {"date":"2010", "value":"80",}, {"date":"2011", "value":"94",}, {"date":"2012", "value":"50",}, ], "Object two":[ {"date":"2010", "value":"104",}, {"date":"2011", "value":"41",}, {"date":"2012", "value":"92",}, ], "Object three":[ {"date":"2010", "value":"75",}, {"date":"2011", "value":"43",}, {"date":"2012", "value":"85",}, ], "Object four":[ {"date":"2010", "value":"75",}, {"date":"2011", "value":"43",}, {"date":"2012", "value":"85",}, ] } var margin = {top: 30, right: -3, bottom: 30, left:0}, width = parseInt(d3.select('#holder').style('width'),10) width = width - margin.left - margin.right, height = width/2; var initial = 0, max = data['Object one'].length-1; var mainChartSVG = d3.select('#holder') .append('svg') .attr('width', width) .attr('height', height) var frameHolder = mainChartSVG.append('g') .classed('holder-frames',true); // Draw squares to show levels var maxValue = d3.max(data, function(d){ return d.value; }); var valueScale = d3.scale.linear() .domain([0,100]) .range([50,0]); var levelsHolder = mainChartSVG.append('g') .classed('holder-levels',true); var levels = levelsHolder.selectAll('rect.square-levels') .data(Object.keys(data).map(function(k) { return data[k][initial]; })) .enter().append('rect') .classed('square-levels', true); function drawSquares() { levels .attr({ x: function(d, i){ return i % 5 * width/5 }, y: function(d, i){ return valueScale(d.value)+(Math.floor(i / 5) * width/5) }, width: width/5-3, height: function(d) { return (width/5-3)-valueScale(d.value) ; }, fill:"red", class: function(d) { return d.value; } }) } drawSquares(); var frameHolder = mainChartSVG.append('g') .classed('holder-frames',true); var keyarray = Object.keys(data) var frames = frameHolder.selectAll('rect.square-frame') .data(keyarray) .enter().append('rect') .classed('square-frame', true) .attr({ x:function(d, i){ //console.log(d, "D VALUE") return i % 5 * (width/5 ) }, y:function(d, i){ return Math.floor(i / 5) * (width/5 ) }, width: width/5-3, height: width/5-3, }) d3.select('#myButton').on('click', function() { initial++; if(initial > max) { initial = 0; } levels.data(Object.keys(data).map(function(k) { return data[k][initial]; })); drawSquares(); }); 

 body{ background-color:white; } .square-frame{ stroke: #38434f; fill: none; } a { text-decoration: none; display: inline-block; padding: 3px 8px; margin-bottom: 2em; } a:hover { background-color: gray; color: black; } #myButton { background-color: #e5e5e5; color: black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <a href="#" id="myButton">&#8250;</a> <div id="holder"></div> 

希望这可以帮助。 如果您有任何疑问，请告诉我。