Question

我已经完成了d3.js的一些工作，但我仍然坚持这个问题。我有一个多线图，以平滑的线条和圆圈开头。我想要发生的是当我切换一个图例按钮时，这些线应该在基础（平滑）和线性（正常）之间转换。但是，当我点击按钮时，我注意到从基线到线性的过渡发生了，但是线路的一部分会消失，并且不会与点匹配。

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

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

然后我创建基线，为＆＃34; d＆＃34;调用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函数，它将插值切换为＆＃39; linear＆＃39;。

var linearLine = tx_year_grp.selectAll（＆＃34; .line＆＃34;）; linearLine.transition（） .duration（3000） .attr（＆＃34; d＆＃34;，function（d）{return lineGen（d.values）;}）;

这似乎相当直接，但我做错了什么。任何帮助将不胜感激。

提前致谢

Answer 1

好的，这是我的解释：

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

但它仍然会将笔划数组设置为基本路径的长度，然后为另一个等效长度为空白 - .attr("stroke-dasharray", totalLength + " " + totalLength)（为什么你有一个笔划数组？）。因此，线性线的路径长度比基线长的任何部分都是空白的，因为它将延伸到笔划虚线图案的空位。尝试删除stroke-dash属性以查看。

如果这不起作用，请尝试制作一个jsfiddle，以便人们可以捅一下

d3.js过渡基线到线性线缩短/隐藏线的一部分

1 个答案: