javascript - d3.js 中的多行转换

Question

我正在尝试在 http://bl.ocks.org/mbostock/1642874 处的折线图中添加另一条线.

代码是

var n = 40,
    random = d3.randomNormal(0, .2),
    data = d3.range(n).map(random);

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 20, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .domain([0, n - 1])
    .range([0, width]);

var y = d3.scaleLinear()
    .domain([-1, 1])
    .range([height, 0]);

var line = d3.line()
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

g.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y));

g.append("g")
    .attr("clip-path", "url(#clip)")
  .append("path")
    .datum(data)
    .attr("class", "line")
  .transition()
    .duration(500)
    .ease(d3.easeLinear)
    .on("start", tick);

function tick() {

  // Push a new data point onto the back.
  data.push(random());

  // Redraw the line.
  d3.select(this)
      .attr("d", line)
      .attr("transform", null);

  // Slide it to the left.
  d3.active(this)
      .attr("transform", "translate(" + x(-1) + ",0)")
    .transition()
      .on("start", tick);

  // Pop the old data point off the front.
  data.shift();

}

我基本上只是尝试使用 data2 = d3.range(n).map(random); 创建另一个数据集，并为新数据集添加了一行(使用与原始代码相同的代码) ，但更改了数据集变量名称)

g.append("g")
    .attr("clip-path", "url(#clip)")
  .append("path")
    .datum(data2)
    .attr("class", "line")
  .transition()
    .duration(500)
    .ease(d3.easeLinear)
    .on("start", tick);

它确实添加了另一 strip 有其他随机点的线，但动画不再平滑。

我不知道是什么让动画变得流畅。

如果将 n - 1 更改为 n，即更改，我会遇到与原始代码相同的问题

var x = d3.scaleLinear()
    .domain([0, n - 1])
    .range([0, width]);

至

var x = d3.scaleLinear()
    .domain([0, n])
    .range([0, width]);

我不明白为什么这会改变平滑度。

Answer 1

In the tutorial在您的链接要点中提到，Mike Bostock 解释了为什么这应该是域名:

When a new data point arrives, we redraw the line instantaneously and remove the previous transform (if any). The new data point is thus initially invisible off the right edge of the chart. Then, we animate the x-offset of the path element from 0 to some negative value, causing it to slide left.

在下面，他补充道:

If you’re using spline interpolation for the path data, then note that adding a control data point changes the tangents of the previous control point, and thus the shape of the associated segments. To avoid another wiggle when the control points are changed, further restrict the visible region (the x-domain) so that the extra control point is hidden.

你会注意到in the next gist ，迈克·博斯托克写道:

When transitioning a transform on a path using basis interpolation, you must clip the path by two additional control points so that the change in tangent is not visible while the path slides left.

x 比例的创建方式如下:

var x = d3.scaleLinear()
    .domain([1, n - 2])
    .range([0, width]);

由于域仅转到 n-2，因此 n-1 和 n 点在 View 中隐藏(由于clipPath)。