更新 x 轴 d3js

Question

我正在尝试根据用户过滤器更新 D3js 条形图中的 x 轴（部分工作），条形图实际上在变化，但效果不佳。 我真的不知道问题出在哪里，我需要一些帮助。

在这部分代码中，我正在更新条形图

 function update(selectedGroup) {
    svg.selectAll("rect").remove()

    var groups = d3.map(dataFilter, function(d){return(d.group)}).keys();

    x.domain(groups);
    var dataFilter = result.filter(function(d){return d.group==selectedGroup});
    console.log(dataFilter);
    var rectG=rectangulos(dataFilter)

}

完整的条形图

现在工作如何： 结果应该是这样的

我这里有一个活生生的例子

Answer 1

您看到此行为的原因相对简单。

当尺度x的域是所有组x.bandwidth()很小。 但是当x的域只有一个值时， x.bandwidth()很大。 在这两种情况下，第一个波段都从相同的位置开始。

接下来我们在这里有一个嵌套比例xSubgroup - 它的范围等于x.bandwidth() 。 当x的域发生变化时，我们需要更新xSubgroup的范围。 如果我们不这样做，条形图仍然会很细并从轴的开头开始（因为即使组的带宽发生变化，条形图的带宽也不会改变）。 您不更新子比例的范围，但我们需要这样做：

 x.domain(groups);
 xSubgroup.range([0, x.bandwidth()])

有了这个，我们得到了我们正在寻找的更新。

但轴标签保持不变。 除非我们明确这样做，否则更新比例不会更新轴。 我将分解您的方法链接并存储g保持轴的参考：

var xAxis = svg.append("g")    
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

xAxis.selectAll("text")
  ...

现在我们可以更新轴了，我也在推进文本样式。 您可以通过使用更新 function 来完成轴和数据的所有进入/退出/更新来简化代码 - 这里我们有一些重复，因为初始设置和更新 function 有重叠。

要更新我们使用的轴：

 // Call the axis again to update
 xAxis.call(d3.axisBottom(x))
 xAxis.selectAll("text")
  .style("text-anchor", "end")
  .attr("font-size", "55px")
  .attr("y", "-7")
  .attr("x", "-7")
  .attr("transform", "rotate(-90)");

如果我理解正确，它会给出所需的行为，更新 plunkr