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