переходные линии в d3.js

Question

Извините, если этот вопрос кажется глупым, но он забивает меня на пару дней, поэтому я был бы очень признателен за любой простой вклад от любого! :) Я пытаюсь построить линейный граф в d3.js, который переходит между разными наборами данных. Однако всякий раз, когда я нажимаю на функцию перехода, он выбирает исходную строку на графике, а также оси графика и переводит все это. Я попытался сделать selectAll («svg: path») вместо selectAll («путь»), но он просто вернул 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) 
...