如何在d3js中更新分组的条形图 [英] How to update a grouped bar-chart in d3js

问题描述

在此 朋克车 中，我试图根据与新的csv数据更新条形的方式与 此 。

In this plunker I've attempted to update the bars based on new csv data in a similar fashion to this.

它将获取新数据并更新矩形，但不会删除先前的数据。

It fetches the new data and updates the rectangles but doesn't remove the previous data.

我不知道代码的哪一部分不能正常工作，在以前的尝试中，我省略了 .attr（ transform，function（d）{return translate（ + x0（d.State ）+，0）;}）
，并获得最左边的一组条形以更新和删除先前的数据，但其他组均未显示。

I have no idea what part of the code isn't working right, in a previous attempt I omitted .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }) and got the leftmost group of bars to update and remove previous data but none of the other groups were showing.

感谢任何帮助！

编辑：：上传了一个工作示例 此处

Uploaded a working example here

以下是相关代码：

let bars = g.selectAll(".test")
    .data(data)
bars = bars.enter().append("g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { 
        return keys.map(function(key) { 
            return {key: key, value: d[key]}; 
        }); 
    })
bars = bars
  .enter().append("rect")
    .attr("width", x1.bandwidth())
    .attr("x", function(d) { return x1(d.key); })
    .attr("fill", function(d) { return z(d.key); })
    .merge(bars)

bars.transition()
    .duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars.exit().remove();

推荐答案

图表中的图层/组似乎并不根据新数据进行更新。您可以对酒吧的输入，更新和退出代码进行以下更改：

The layers/groups in the chart do not seem to update as per the new data. Here's some changes you could make to the bars' enter, update and exit code:

var barGroups = g.selectAll("g.layer").data(data); 
barGroups.enter().append("g").classed('layer', true)
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

barGroups.exit().remove(); 

var bars = g.selectAll("g.layer").selectAll("rect")
    .data(function(d) { 
        return keys.map(function(key) { 
            return {key: key, value: d[key]}; 
        }); 
    });
bars.enter().append("rect").attr("width", x1.bandwidth())
    .attr("x", function(d) { return x1(d.key); })
    .attr("fill", function(d) { return z(d.key); })
    .transition().duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars
    .transition().duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars.exit().remove();

因此，如果您查看代码，则首先处理钢筋组/层，然后再处理条，即矩形。让我知道这是否行不通。

So if you look at the code, bar groups/layers are being dealt with first and then the actual bars i.e. rectangles. Let me know if this doesn't work.

希望这会有所帮助。 ：）

Hope this helps. :)

这篇关于如何在d3js中更新分组的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！