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;
}

以下是更新的plunker：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

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

1 个答案: