在过渡中更新轴样式

Question

我使用的是像 this 示例中那样的 syled y 轴。我正在动态更改数据。轴过渡有效，但我不知道如何为新轴应用相同的样式。

更新前的轴：

var gy = svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

var styling = function(selection) {
   selection.selectAll("g").filter(function(d) { return d; })
       .classed("minor", true);
   selection.selectAll("text")
       .attr("x", 4)
       .attr("dy", -4);
};

styling(gy);

轴过渡：

var update = function() {
   // change data, domain etc
   // ...

   // change axis
   svg.transition()
     .duration(600)
     .select(".y.axis")
     .call(yAxis);

   // how to apply the same style ??
}

我在更新函数中尝试过类似的东西，但是在 yAxis return 一些不同的对象上调用转换然后在更新之前得到错误

selection.selectAll(...).filter(...).classed is not a function

...所以它不起作用：

var gy = svg.transition()
  .duration(600)
  .select(".y.axis")
  .call(yAxis);

styling(gy);

Answer 1

这里

var gy = svg.transition()
  .duration(600)
  .select(".y.axis")
  .call(yAxis)

gy 是过渡对象，所以当您这样做时：

styling(gy); //will not work, because styling expects a selection object.

本来应该是

styling(d3.select(".y.axis")); //inside update function

在过渡中更新轴样式

Update axis style in transition

javascript

svg

transition

d3.js