D3.js 如何使用新数据更新图表显示？

Question

我正在尝试为我的 D3 旭日图实现更新功能，我可以在其中更改显示的数据。我能够成功添加或删除节点。

但是，我似乎无法修改现有数据。

例如，如果我的一半图表被删除，我希望另一半填充删除留下的 space。添加新数据时也会发生同样的事情，我希望现有数据缩小并减少 space

这是我的更新函数：

            function update(newData) {
                root = newData;
                node = root;

                g = svg.datum(root)
                    .selectAll("g")
                    .data(partition.nodes(root));

                var newG = g.enter()
                    .append("g");

                g.exit().selectAll("path").transition().duration(5000).attrTween("d", arcTween(0)).remove();                    

                path = g.selectAll("path").transition().duration(5000).attr("d", arc);

                newG.append("path")
                    .attr("d", arc);             
            };

图表的构建方式如下：

            function render(data) {
                root = data;
                node = root;

                width = $(".burst-chart-container").height();
                height = ($(".burst-chart-container").width() / 2);
                radius = Math.min(width, height) / 2;

                x = d3.scale.linear().range([0, 2 * Math.PI]);
                y = d3.scale.linear().range([0, radius]);

                rad = Math.min(width, height) / Math.PI - 25;

                partition = d3.layout.partition().sort(null).value(function (d) { return d.size; });

                arc = d3.svg.arc()
                    .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
                    .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
                    .innerRadius(function (d) { return Math.max(0, y(d.y)); })
                    .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); });

                svg = d3.select(element[0]).append('svg')
                    .attr("width", width).attr("height", height)
                    .attr("class", "svgDashboard")
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");                                     

                g = svg.datum(root).selectAll("g")
                    .data(partition.nodes)
                    .enter()
                    .append("g")

                path = g.append("path")
                    .attr("d", arc)
            }

我知道 path.attr("d",arc) 应该更新视觉效果，但它在我的情况下不起作用。

我认为这与不告诉现有弧线他们需要更改的分区布局有关，或者与我选择更新数据的方式有关，但我可能是错的。

如有任何帮助，我们将不胜感激。

Answer 1

我发现 path 和 text 数据从未更新过。我的更新只改变了 g 元素数据。为了更正它，我只是将父数据更新后放入他的子数据中。

                g = svg.datum(root)
                    .selectAll("g")
                    .data(partition.nodes(root));

                //Add this part to update child elements
                g.selectAll("path").each(function () {
                    d3.select(this).datum(d3.select(this.parentNode).datum());
                });

                g.selectAll("text").each(function () {
                    d3.select(this).datum(d3.select(this.parentNode).datum());
                });

通过这些更改，我可以调用我的 attrTween 函数，该函数使用新数据更新视觉对象。

D3.js 如何使用新数据更新图表显示？

D3.js How to update chart display with new data?

javascript

d3.js

sunburst-diagram