更新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)

}

完整的条形图

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

我有一个真实的例子here

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")
  ...

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

要更新轴，我们使用：

 // 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)");

如果我正确理解的话，updated plunkr