javascript - 如何在 d3js 转换期间删除轴路径/线

Question

在此Plunker我正在调用一个 customYaxis 函数来删除 .domain 并添加一些 css 样式。

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

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

我知道您可以仅使用 css 实现相同的效果，但我想知道是否有一种方法可以确保使用此自定义函数保持删除域的状态，或者是否有另一种仅使用 javascript 的方法。

Answer 1

当您调用轴生成器时，一条黑线(实际上是一条 <path> )带有一个名为 domain 的类自动创建。看看 source code :

path = path.merge(path.enter().insert("path", ".tick")
    .attr("class", "domain")
    .attr("stroke", "#000"));

因此，您现在看到的是预期的行为:路径会在消失前短暂出现。

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

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

这是更新的插件:https://plnkr.co/edit/eY9gimuT6YI3Can679Bj?p=preview

编辑:

实际上，有一种方法可以避免 CSS:使用 start过渡中的听众:

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

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

这是新的 Plunker:https://plnkr.co/edit/Hc9dl5A7KSF3Q7MtuoKA?p=preview