将基准线转换为线性线可缩短/隐藏部分线

Question

我已经用d3.js做了一些工作，但我被这个问题卡住了。我有一个多线图，它从流畅的线条和圆圈开始。

我想要发生的是，当我切换一个图例按钮时，line(s)应该在基本(平滑)和线性(正常)之间转换。然而，当我点击按钮时，我注意到从基础到线性的转变发生了，但随后线的一部分被擦除，并且与点不匹配。

为了创建线，我有两个线函数。一个用于线性，另一个用于基础。

  var lineGen = d3.svg.line()
  .interpolate("linear")
  .x(function(d) {
      return xScale(+d.tx_week);
    })
  .y(function(d) {
      return yScale(d.RelativeChange);
    });

  var lineMean = d3.svg.line()
  .interpolate("basis")
  .x(function(d) {
      return xScale(+d.week);
    })
  .y(function(d) {
      return yScale(d.amount);
    });

然后，我为d属性创建了调用lineMean函数的基本行

  var line = tx_year_grp.selectAll("path")
  .data(function(d) { return [d]; })
  .enter().append("svg:path")
  .attr("class", "line")
  .attr("fill", "none")
  .attr("d", function(d) { return lineMean(d.values); })
  .style('stroke', function(d) {return color(d.key); })
  .on('mouseover', function(){
      var sel = d3.select(this)
      .style('stroke-width', 4)
      this.parentNode.parentNode.appendChild(this.parentNode);
    })
  .on('mouseout', function(d) {
      d3.select(this)
      .transition()
      .duration(750)
      .style('stroke-width', 2)
    });

然后，我向创建的所有线添加过渡。

  for(u=0; u < nested_data.length; u++){
    var pathId = document.getElementById('tx_year_grp' + nested_data[u].key);
    var updPath = d3.select(pathId).selectAll("path");
    var totalLength = updPath.node().getTotalLength();

    updPath
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(0)
    .ease("linear")
    .attr("stroke-dashoffset", 0)

  }//end for

这正是我想要的，并创建了一条基准线。当我切换图例按钮使线条成为线性并连接到点时，会发生过渡，但随后线条会擦除或覆盖自身，因此线条看起来更短，并且不会与所有点连接。

下面是我用来更改代码行的代码。我调用了lineGen函数，该函数将插值切换为“线性”。

var linearLine = tx_year_grp.selectAll(".line");
             linearLine.transition()
              .duration(3000)
              .attr("d", function(d) { return lineGen(d.values); });

这看起来相当简单，但我做错了什么。

Answer 1

好吧，这是我的解释：

线性路径将比基本路径长。

但它仍然会有您设置为基础路径长度的笔划破折号数组，然后对于另一个等效的长度.attr("stroke-dasharray", totalLength + " " + totalLength)为空(为什么要有一个笔划破折号数组？)。因此，路径长度比基准线长的线性线的任何部分都将是空白的，因为它将延伸到笔划划线模式的空位。尝试删除笔划-破折号属性以查看。

如果这不起作用，可以试着做一个jsfiddle，这样人们就可以到处看看