转换d3.js中的行

时间:2012-06-12 17:11:53

标签: transition d3.js

很抱歉,如果这个问题看起来很愚蠢,但是我已经困扰了几天,所以我真的很感激任何人的简单输入! :) 我正在尝试在d3.js中构建一个在不同数据集之间转换的折线图。但是,每当我点击过渡函数时,它会选择图形上的原始线,以及图形的轴,并转换所有线条。我尝试执行selectAll(“svg:path”)而不是selectAll(“path”),但它只返回了一个DOMException 12,表明选择不存在。

//beginning of code to append axis to graph
graph.append("svg:g").attr("class", "x axis")

//draws the original line on the graph
graph.append("svg:path").attr("d", line(dataset1));

//line function
var line = d3.svg.line()
        .x(function(d) {return x(d.age);})
        .y(function(d) {return y(d.freq);})
        .interpolate("basis");

//transition function
function transition(newData) {          
        graph.selectAll("path")
            .data(newData)
        .transition()
            .duration(2000)
            .attr("d", line(newData));
    }

感谢您的回复! :)

1 个答案:

答案 0 :(得分:4)

只需提供您想要更改唯一类/标识符的内容,例如

graph.append("svg:path").attr("d", line(dataset1)).classed("line", true);
...
graph.selectAll("path.line")
        .data(newData)
...