D3.js 用新数据集替换数据

使用D3.js，我有如下内容：

var sets = [
    { data:[{date:1980,value:10},{date:1981,value:20},{date:1982,value:30}] },
    { data:[{date:1981,value:10},{date:1982,value:20},{date:1983,value:30}] },
    { data:[{date:1982,value:10},{date:1983,value:20},{date:1984,value:30}] }
];

var paths = g.selectAll("path")
    .data(sets);

paths.enter()
    .append("path")
    .datum(function(d) { return d.data; })
    .attr("class","line")
    .attr("d", line);

我把它装订成这样的图表：

var sets = [
    { data:[{date:1980,value:10},{date:1981,value:20},{date:1982,value:30}] },
    { data:[{date:1981,value:10},{date:1982,value:20},{date:1983,value:30}] },
    { data:[{date:1982,value:10},{date:1983,value:20},{date:1984,value:30}] }
];

var paths = g.selectAll("path")
    .data(sets);

paths.enter()
    .append("path")
    .datum(function(d) { return d.data; })
    .attr("class","line")
    .attr("d", line);

其中

g

是

svg

元素中的

g

元素。这很有效。对于

集合

中的每个项目，我使用

数据

中的值获得一个

路径

。现在，我要做的是单击一个元素并用不同的集合替换数据：

var altData = [
    { data:[{date:1980,value:30},{date:1981,value:20},{date:1982,value:10}] },
    { data:[{date:1981,value:10},{date:1982,value:20},{date:1983,value:30}] },
    { data:[{date:1982,value:10},{date:1983,value:20},{date:1984,value:0}] }
];

d3.select("#transition").on("click", function() {
    paths.data(altData);
    console.log("click");
});

但是

path.data（altData）

似乎没有任何作用。没有控制台错误，但图表不变。我需要做什么来告诉它数据已经更改，应该重新绘制行？作为奖励，我真的希望这一转变是动画

---

基本上你需要告诉d3重新绘制它。在您的情况下，它是通过调用attr（“d”，line）实现的

对于transition，将transition（）放在两个属性（“d”，fnc）之间。您的onclick函数如下所示

d3.select("#transition").on("click", function() {
paths.attr("d", line)
.transition()
.attr("d", function(d, i){
    return line(altData[i].data)
})

}))

jsFIDLE查看在单击转换时将更改数据的方法

我将绘制线条的部分制作成一个函数，并传递它应该绘制线条的数据

 drawPaths(sets) ;
       function drawPaths(sets) {

        var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var paths = g.selectAll("path")
            .data(sets);

            paths.enter()
            .append("path")
            .datum(function(d) { console.log(d); return d.data; })
            .attr("class","line")
            .attr("d", line);

         }