Question

使用此处列出的示例：http://bl.ocks.org/anotherjavadude/2940908在基础知识取得一些成功后，我一直在绕过D3。

我已经构建了一个堆叠图（Fiddle）并设法使我的初始转换工作，添加新数据时出现问题。

我收到的错误是＆＃39;未捕获的类型错误：无法读取属性＆＃39;长度＆＃39;未定义＆＃39;

这是.data（），它落在哪里：

d3.select('rect.stacks')
    .data(function(d){return d;}) // error occurs here
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand()-50)
    .transition()   
    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })       
    .duration(1000);

无论出于何种原因，尝试更新正在传递的3D数组时都没有正确格式化，我不确定原因。

我已经尝试将功能块提取到功能中并且用尽我对待尝试事物的知识（这将解释任何奇怪/意大利面）。

谢谢！

Answer 1

在更新时，您将失去g.valgroup和rect.stacks之间的父关系，因为您正在进行不同的选择。

您可以尝试使用此选项来保留子选择并保存数据：

d3.selectAll("g.valgroup")
    .data(stacked)
.selectAll('rect.stacks')
    .data(function(d){return d;})  
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand()-50)
    .transition()   
    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })       
    .duration(1000);

- ＆GT; https://jsfiddle.net/y8ezx2fh/

使用D3中的过渡更新堆积条形图

1 个答案: