Javascript 独立SVG元素中的并发转换路径

我试图在各自的svg元素中显示四个独立的实时图形（不确定这或我写的是否是良好的实践），并设法使所有x轴连续转换。但是，当我添加路径时，它们和轴会跳跃，并且不会平滑过渡。有人能帮我同时转换带轴的路径吗？任何洞察都将不胜感激，因为我是D3的新手。非常感谢你

var n = 45,
      duration = 1000;

var properties = {
    "#count": {
        data: d3.range(n).map(function() { return 1000; })
    },
    "#relativeHumidity": {
        data: d3.range(n).map(function() { return 2000; })
    },
    "#temperature": {
        data: d3.range(n).map(function() { return 3000; })
    },
    "#pressure": {
        data: d3.range(n).map(function() { return 4000; })
    }
};

// margin convention
var margin = {top: 35, right: 70, bottom: 35, left: 70},
    width = 960 - margin.left - margin.right, // 900
    height = 500 - margin.top - margin.bottom; // 494

var now = Date.now(),
    offLeft = now - (n - 3) * duration,
    firstPoint = offLeft + duration,
    lastPoint = firstPoint + (n - 4) * duration;

// chop off last two for basis interpolation
var x = d3.time.scale()
    .domain([firstPoint, lastPoint])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 10000])
    .range([height, 0]);

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { 
      return x(now - (n - 3) * duration + i * duration); 
    })
    .y(function(d, i) { return y(d); });

for (prop in properties) {

    var item = properties[prop];

    item.svg = d3.select(prop).append("p").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // mask 
    item.svg.append("clipPath")
        .attr("id", prop + "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    item.xAxis = item.svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom"));

    item.svg.append("text")
        .attr("x", width)
        .attr("y", height + margin.bottom)
        .style("text-anchor", "end")
        .text("Time");

    item.svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - 55)
        .attr("x", 0)
        .style("text-anchor", "end")
        .text("Count")

    item.yAxis = item.svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(y).orient("left"));

    item.path = item.svg.append("g")
        .attr("clip-path", "url(#" + prop + "clip)")
        .append("path")
        .datum(item.data)
        .attr("class", "line")
        .attr("d", line);    
}

function tick() { 
    // update endpoints 
    now = Date.now(),
    offLeft = now - (n - 3) * duration,
    firstPoint = offLeft + duration,
    lastPoint = firstPoint + (n - 4) * duration;

    // add value
    for (prop in properties) {
        var item = properties[prop];
        item.data.push(Math.random() * 300 + 5000);
    }

    // update domain
    x.domain([firstPoint, lastPoint]);

    // slide the x-axis left
    d3.selectAll(".x.axis")
         .transition()
         .duration(duration)
         .ease("linear")
         .call(d3.svg.axis().scale(x).orient("bottom"));

    var count = 0;
    // slide the line left
    d3.selectAll("path")
         .attr("d", line)
         .attr("transform", null)
         .transition()
         .duration(duration)
         .ease("linear")
         .attr("transform", "translate(" + x(offLeft) + ",0)")
         .each("end", function() {
        count += 1;
        if (count === 4) {
            count = 0;
            tick();
        } 
    }); // FIXED!

    for (prop in properties) {
        var item = properties[prop];
        item.data.shift();
    }
}

tick();

---

编辑：修正！但我觉得这并不漂亮。导致跳转的原因是每个转换在完成后一遍又一遍地调用tick函数（因为它们不是同时完成的），导致调用它的次数至少比正常情况多4倍（创建跳转）。我所做的只是添加了一个索引，它只会在每次到达4时递归调用tick函数。添加了它。

你能提供一把小提琴吗？我已经试过了，但它什么也显示不出来。将继续尝试并添加，如果它有效。