javascript - 网格线正在重新创建并相互叠加

Question

我正在玩一些 d3 代码 - 为了创建 y 轴，我执行以下操作:

function renderYAxis(svg) { 

 var yAxis = d3.svg.axis()
     .orient("left")
     .scale(_y.range([quadrantHeight(), 0]))
     .tickFormat(d3.format("s"));

 axisData = _currentData.filter(function(row) {
     if ((row['filter1'] === _filter1)) {
         return true;
     }
 }).filter(function(row) {
     if ((row['filter2'] === _filter2)) {
         return true;
     }
 }).map(function(d) {
     return {
         y: +d["Y"]
     };
 });
 var minY2 = d3.min(axisData, function(d) { return d.y });
 if (minY2 > 0) {
     minY2 = 0;
 };
 _y.domain([minY2, d3.max(axisData, function(d) { return d.y })])


 if (!_axesYG) {
     _axesYG = svg
         .append("g")
         .attr("class", "y axis"); 
 }

 _axesYG
     .attr("transform", function() {
         return "translate(" + xStart() + "," + yEnd() + ")";
     })
     .transition()
     .duration(1000)
     .call(yAxis);

  //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> maybe following needs changing somehow? >>>>>>>>>>>>>>
  d3.selectAll("g.y g.tick")
     .append("line")
     .classed("grid-line", true)
     .attr("x1", 0)
     .attr("y1", 0)
     .attr("x2", quadrantWidth())
     .attr("y2", 0);

}

图表有一个过渡，但经过几次过渡后，一些网格线正在复制并相互叠加 - 因此产生了一些更粗的线条。我在上面标记了我认为可能存在问题的地方，我不确定如何更改此代码 - 是否有标准方法？

此行为的完整工作示例保存在此处:http://plnkr.co/edit/JD52TfAddZSpNR3oaMRv?p=preview

如果您多次点击该按钮，您将看到正在重新创建和覆盖过渡前后共享的公共(public)网格线。这两个:

非常感谢任何帮助。

Answer 1

一个简单的解决方案是将刻度宽度设置为负值:

.innerTickSize(-quadrantWidth());

这样，您就不必担心添加、删除或更新行，并且您不会有重复的元素:轴生成器会为您处理所有这些。

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

编辑:您在 your answer 中提到你对 Nick Zhu 的方法有疑问。那是因为你的选择不正确。它应该是这样的:

var lines = d3.selectAll("g.y g.tick")

lines.selectAll(".grid-line")
    .remove();

lines.append("line")
    .classed("grid-line", true)
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", quadrantWidth())
    .attr("y2", 0);

这是相应的插件:http://plnkr.co/edit/189hJBepdVVreLghBgc0?p=preview