d3.js中的过渡行

Question

对不起，如果这个问题看起来很愚蠢，但它让我困惑了几天，所以我会非常感谢来自任何人的简单输入！ :) 我想在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)); 
    } 

感谢您的任何回应！ :)

Answer 1

只给你想要改变一个独特的类/标识符，例如

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