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上调用转换会在更新之前返回一些不同的对象并出现错误

selection.selectAll（...）。filter（...）。classed不是函数

......所以它不起作用：

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

在转换中更新轴样式

1 个答案: