D3 更新分组条形图上的 x 轴组答案

【问题标题】：D3 Updating x axis groups on grouped bar chartD3 更新分组条形图上的 x 轴组
【发布时间】：2016-08-12 15:25:17
【问题描述】：

我正在尝试更新沿 x 轴具有不同组的分组条形图（取决于数据）。

这里是小提琴：https://jsfiddle.net/mrl513/arjcq9ka/ 使用单选按钮查看更新。

问题是我需要通过在现有范围带上调用 exit 来更新 x1 域（范围带）。前 4 个数据组保留原始范围带。

第一个数据集有 4 个组。第二个数据集有 8 个组

您可以在小提琴上看到，选择第二个按钮时（它有8个GPS），前4个GPS保留了原始范围频带。

感谢您的任何意见！

function updategp(data) {
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "state"; });
    data.forEach(function(d) {d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});
    x0.domain(data.map(function(d) { return d.state; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);


//etc.. see fiddle

【问题讨论】：

标签： d3.js bar-chart transition

【解决方案1】：

我不太了解您的数据，但在我看来，两个视图之间的数据不相关。因此，我认为您应该更改转换，以便在您通过按单选按钮更改视图时不保留任何条并将其移动到另一个位置。仅当两个状态相关时才应使用保留和更改元素（例如，相同的组但不同的年份）。从 Mike Bostocks excellent guide 到对象恒常性：

首先，动画应该是有意义的。虽然在过渡过程中条形图在屏幕上飞来飞去可能会在视觉上令人印象深刻，但动画只能在增强理解时使用。不相关的数据集或维度之间的转换（例如，从温度到股票价格）应该使用更简单的淡入淡出或剪切，而不是无端的、无意义的移动。

因此，在您的情况下，我将通过将所有条折叠到 x 轴来退出所有条，然后通过从 x 轴展开它们来输入新条。为此，您首先需要向.data() 添加一个键函数，以确保不会将新数据添加到现有元素，而是添加到新元素（尚未存在的元素）。一种可能的关键功能如下：

  var state = chart.selectAll(".state")
      .data(data, function(d){return JSON.stringify(d)});

然后通过将它们折叠到 x 轴来退出条形：

state.exit().transition().duration(1000).selectAll("rect")
  .attr("y", height)
  .attr("height", 0)
  .remove();

并通过从 x 轴向上增长来输入具有 1000 毫秒延迟（或初始加载期间 0 毫秒延迟）的新条：

bars.enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", height) //start from x-axis
  .attr("height", 0) //with initial length of 0
  .style("fill", function(d) { return color2(d.name); });

bars.transition()
   .delay(function(){
      return state.exit()[0].length > 0 ? 1000 : 0;
   })
   .duration(1000)
   .attr("y", function(d) { return y(d.value); })
   .attr("height", function(d) { return height - y(d.value); })
   .style("fill", function(d) { return color2(d.name); });

我更新了fiddle 以显示这些变化。

【讨论】：

【解决方案2】：

我看到了问题并解决了它 - 在子组的过渡期间，我没有调用 width 和 x 属性，因此它们没有被更新。

【讨论】：