Question

使用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);

其中g是g元素中的svg元素。这有效。对于set中的每个项目，我使用path中的值获得data。现在我要做的是单击一个元素并用另一组替换数据：

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");
});

但paths.data(altData)似乎没有做任何事情。没有控制台错误，但图表没有变化。我需要做些什么来告诉它数据已经改变并且应该重新绘制线条？作为奖励，我真的喜欢这种过渡动画。

Full fiddle

Answer 1

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

对于转换，将transition（）置于两个attr（“d”，fnc）之间。您的onclick功能将如下所示

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

}）;

Jsfiddle http://jsfiddle.net/8fLufc65/

Answer 2

查看this plnkr，它会在点击转换时更改数据。

我创建了将线条绘制成函数并传递应该绘制线条的数据的部分。

 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);

         }

用新集替换数据

2 个答案: