Question

我无法使用新数据更新D3.js中包含嵌套数据的条形图。

我有以下形式的嵌套数据：

data = [[1,2,3,4,5,6],[6,5,4,3,2,1]];

我设法通过首先为每个子数组附加一个组来可视化数据。在组中，我然后将数组添加为数据（简化）：

function createGraph(l, svg){
  var g = svg.selectAll("g")  
    .data(l)
    .enter().append("g");  

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

但是，当使用不同的数据再次调用该函数时，没有任何反应。

似乎在第二行中，rects不会更新。

我在jsBin上创建了一个完整的示例：http://jsbin.com/UfeCaGe/1/edit?js,output

Answer 1

对Lars'虫子捕获的更多解释，因为我已经开始玩了...

关键在于代码的这一部分：

  var group = svg.selectAll("g")  
    .data(l)
    .enter().append("g");

为变量group分配 enter 选项，而不是原始选择。然后在下一行：

var bar = group.selectAll("rect")
        .data(function(d){
            return d;
        });

您最终将bar定义为仅作为刚输入组的子项的矩形。因此，即使您正在为矩形正确处理更新，整个代码段甚至都没有运行。您需要在分支链之前保存组选择以处理输入组：

var group = chart.selectAll("g")
        .data(dt);

group.enter().append("g");

var bar = group.selectAll("rect")
        .data(function(d){
            return d;
        });

此外，您在更新中的函数声明中遗漏了j。您可以通过在矩形后输入矩形更新代码来输入代码来减少代码重复，然后不必为enter指定任何在更新中设置的属性。（某些较旧的示例不使用此模式，因为d3的原始版本不会自动将新输入的元素传输到主选择。）

// enter bar.enter().append("rect") .attr("fill", function(d,i,j){ return colors(j);}) .attr("height", 0); // update bar.attr("transform", function(d, i, j) { x = "translate("+(i*2.2*w+j*w)+",0)"; return x; }) .transition() .duration(750) .attr("width", w) .attr("height", function(d){return d*10;});

在D3.js中重新加载嵌套数据

1 个答案: