Question

我试图将四个单独的实时图形显示在他们自己的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倍（创建跳转）。我所做的只是添加一个索引，每次命中时都会递归调用tick函数。添加它。

在单独的SVG元素中并发转换路径

0 个答案: