Javascript 如何在d3js中删除过渡期间的轴路径/线

在这里，我调用

customYaxis

函数来删除

.domain

，并添加一些css样式

  function customYAxis(g) {
    g.call(yAxis)
    g.select(".domain").remove();
    g.selectAll("line")
      .attr("stroke", "#777")
      .attr("opacity", .5);
  }

但在转换过程中，域会短暂地重新出现，然后再次被删除

---

我知道只使用css可以达到同样的效果，但我想知道是否有办法确保使用此自定义函数删除域，或者是否有另一种方法只使用javascript。

当您调用axis生成器时，一条黑线（实际上是一条

）使用名为

的类，将自动创建域

。请看一下：

因此，您现在看到的是预期的行为：路径将在消失之前短暂出现

最好的方法，也是D3代码中最常用的方法，就是简单地用CSS隐藏路径：

.axis--y path {
  stroke: none;
}

以下是更新的plunker：

编辑：

实际上，有一种方法可以避免CSS：在转换中使用

start

侦听器：

g.selectAll(".axis.axis--y").transition()
    .duration(durations)
    .call(customYAxis)
    .on("start", function(){
        g.select(".axis--y .domain").remove();
    })

在我看来，这是一个非常丑陋的解决方案，但如果满足您不使用CSS的要求

---

这是新的Plunker:

@RobertAndersson我用非CSS解决方案编辑了答案。我不喜欢，但这取决于你。。。我会使用CSS。哦，亲爱的，我可以问你为什么不喜欢它吗？因为它很麻烦，它会不断地在SVG中绘制和删除元素，它不是惯用的。。。在我看来，设置一个简单的CSS规则并立即生效要好得多。我不能否认这一点，谢谢你的帮助！

g.selectAll(".axis.axis--y").transition()
    .duration(durations)
    .call(customYAxis)
    .on("start", function(){
        g.select(".axis--y .domain").remove();
    })