D3過渡線發生兩次

Question

我是D3的新手，我試圖根據此處的摘錄輕松地制作一個簡單的實時圖表： https : //bost.ocks.org/mike/path/

我希望能夠向移動的實時圖表中添加一些折線，並通過網絡套接字對其進行更新（我知道該怎么做！！）

當我嘗試添加第二條線時，圖表無法平滑更新，我認為該轉換被調用了兩次。 非常感謝任何幫助。

下面的代碼，但這是一個小提琴https://jsfiddle.net/q8qgbj58/

var n = 243;
var random = d3.randomNormal(0, .2);

var duration = 500;
var now = new Date(Date.now() - duration);

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.scaleTime()
    .domain([now - (n - 2) * duration, now - duration])
    .range([0, width]);

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

var lineNames = [];
var lines = {};
var data = {};

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
    .y(function(d, i) { return y(d); });

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

var axis = 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));

createLine("one");
createLine("two");

d3.selectAll(".line")
    .transition()
        .duration(duration)
        .ease(d3.easeLinear)
        .on("start", tick);

function createLine(name) {
    lineNames.push(name);

    data[name] = d3.range(n).map(random);

    lines[name] = d3.line()
        .curve(d3.curveBasis)
        .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
        .y(function(d, i) { return y(d); });

    g.append("g")
      .attr("clip-path", "url(#clip)")
        .append("path")
        .datum(data[name])
        .attr("class", "line");
}

function tick() {
    var index;
    var i;
    for (i = 0; i < lineNames.length; ++i) {
        index = lineNames[i];

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

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

        // Pop the old data point off the front.
        data[index].shift();
    }

    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    axis.transition()
        .duration(duration)
        .ease(d3.easeLinear)
        .call(d3.axisBottom(x));


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

Answer 1

看起來問題在於在一行調用“ tick”時更新所有行的數據。 您會注意到您的示例僅用1行就能正常工作，而用3行甚至會更加生澀。 這是因為函數tick中的for循環。 D3中的數據綁定非常有用，但是需要一些時間來習慣使用。
我所做的兩個主要代碼更改是使line（）成為變量，並從tick函數中刪除了for循環。 更新的小提琴（我試圖僅注釋掉原始代碼，所以您可以輕松地看到區別）： https : //jsfiddle.net/s07d2hs3/

var line = d3.line()
   .curve(d3.curveBasis)
   .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
   .y(function(d, i) { return y(d); });

function tick() {
    var index;
    var i;
   // Push a new data point onto the back.
   this.__data__.push(random());
   // Redraw the line.
   d3.select(this)
      .attr("d", line)
      .attr("transform", null);

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

    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    axis.transition()
        .duration(duration)
        .ease(d3.easeLinear)
        .call(d3.axisBottom(x));

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

清理提琴： https : //jsfiddle.net/Lr5dxgr0/2/