Question

更新多线图表上的线条的正确方法是什么？简单地绑定新数据和“d”属性上的转换会产生一些奇怪的转换。

这是一个jsFiddle复制

function draw(data) {
    data.columns = ["date", "New York", "San Francisco", "Austin"];

    var cities = data.columns.slice(1).map(function(id) {
        return {
            id: id,
            values: data.map(function(d) {
                return {
                    date: d.date,
                    value: d[id]
                };
            })
        };
    });

    x.domain(d3.extent(data, function(d) {
        return d.date;
    }));

    y.domain([
        d3.min(cities, function(c) {
            return d3.min(c.values, function(d) {
                return d.value;
            });
        }),
        d3.max(cities, function(c) {
            return d3.max(c.values, function(d) {
                return d.value;
            });
        })
    ]);

    z.domain(cities.map(function(c) {
        return c.id;
    }));

    xAxisG
        .transition()
        .duration(duration)
        .call(d3.axisBottom(x));

    yAxisG
        .transition()
        .duration(duration)
        .call(d3.axisLeft(y))

    var city = g.selectAll(".city")
        .data(cities)

    function drawLine(d) {
        d3.select(this).transition()
            .duration(duration)
            .attr("d", function(d) {
                d3.select(this);
                return line(d.values);
            });
    }

    city.enter().append("g")
        .attr("class", "city")
        .append("path")
        .attr("class", "line")
        .style("stroke", function(d) {
            return z(d.id);
        })
        .each(drawLine);

    city.select('.line')
        .each(drawLine);
};

var dataExample = [{"date": "2011-11-22", "New York": 50, "San Francisco": 0, "Austin": 57 }, ...];

https://jsfiddle.net/m3kvh29d/

Answer 1

问题是我正在尝试为不具有相同点数的路径设置动画。

此解决方案1仅适用于线性曲线，如果它在大量点上不是线性的，那么在开始时仍会得到“结”。这个2适用于其他类型的曲线（pathTween方法），但资源非常昂贵:(有5行65列，我接近700毫秒延迟。

更新多线图

1 个答案: