如何使用下拉菜单管理分组条形图的组以更新 D3 中的图表？

Question

我在更新与类似的组条形图时遇到问题，但建议的解决方案对我不起作用或者我误解了。

我相当确定我的问题出在我管理群组的方式上，但我无法确定需要更改的内容。我的初始图表有效，然后当我更新下拉列表时，只有第一组分组条更新。

我的初始图表代码（subgroups由Y1和Y2组成，编号数据的两列名称，见底部示例数据）：

var initialGraph = function(selectedCrime) {
  
      var dataInit = data.filter(d => d.Crime == selectedCrime)
  
        // Show the bars, Cases
    var cases = svg
                .append("g")
                .selectAll("g")
                .data(dataInit.filter(d => d.Count == "Cases"))
                .join("g")
                  .attr("transform", d => `translate(${x(d.Zone)}, 0)`)
                .selectAll("rect")
                .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); })
                  .enter()
                  .append("rect")
                  .attr(...

还有我的更新函数：

var updateGraph = function(selectedCrime) {

  var dataFilter = data.filter(d => d.Crime == selectedCrime)

    var cases = svg
          .data(dataFilter.filter(d => d.Count == "Cases"))
          .selectAll("rect.cases2")
          .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); })
          .transition()
          .duration(1000)
                    .attr(...

我最好的猜测是我需要 .merge 或 .join 更新函数中的某处，但我尝试过的所有迭代要么产生错误，要么根本没有效果。非常感谢任何帮助。

示例数据：

Crime,Count,Zone,Y1,Y2
Crime1,Cases,Zone1,43,58
Crime1,Arrests,Zone1,32,35
Crime2,Cases,Zone1,50,58
Crime2,Arrests,Zone1,20,18
Crime2,Cases,Zone2,80,79
Crime2,Arrests,Zone2,5,4

Answer 1

啊，终于让它工作了 1. 删除第一个函数 initialGraph 和过滤器 dataInit，2. 在 .data.filter 中添加一个 && d.Crime 语句到替换初始过滤器，并且 3. 将每个声明拆分为两个声明：

var cases = svg
                .append("g")
                .selectAll("g")
                .data(dataInit.filter(d => d.Count == "Cases"))
                .join("g")
                  .attr("transform", d => `translate(${x(d.Zone)}, 0)`)
                .selectAll("rect")

到

var cases = svg
                .append("g")
                .selectAll("g")
                .data(dataInit.filter(d => d.Count == "Cases"))
                .join("g")
                  .attr("transform", d => `translate(${x(d.Zone)}, 0)`)
   var cases2 = cases.selectAll("rect")

updateGraph 函数不需要更改，即继续仅引用 cases 而不是 cases2。

如何使用下拉菜单管理分组条形图的组以更新 D3 中的图表？

How do I manage groups for a grouped bar chart with a dropdown to update the chart in D3?

javascript

d3.js