Как обновить рассеянную диаграмму?

Question

У меня есть эта таблица и диаграмма с scattergraph:

https://jsfiddle.net/horacebury/bygscx8b/6/

И я пытаюсь обновить позиции разброса точек, когда значения во втором изменении столбца таблицы.

Исходя из этого так я думал, я мог бы просто использовать одну линию (как я не изменяя количество точек, только их позиции):

https://stackoverflow.com/a/16071155/71376

Однако, этот код:

svg.selectAll("circle") 
    .data(data) 
    .transition() 
    .duration(1000) 
    .attr("cx", function(d) { 
    return xScale(d[0]); 
    }) 
    .attr("cy", function(d) { 
    return yScale(d[1]); 
    }); 

дает мне эту ошибку:

Uncaught TypeError: svg.selectAll(...).data is not a function 

Answer 1

Основной вопрос что:

svg.selectAll("circle") не типичный выбор, как вы переопределены svg быть переход, а не общий выбор:

var svg = d3.select("#chart").transition(); 

Любой выбор с помощью этой svg переменной будет возвращать переход (from the API documentation), для пример с transition.selectAll():

For each selected element, selects all descendant elements that match the specified selector string, if any, and returns a transition on the resulting selection.

Для переходов, метод .data не доступен.

Если вы используете d3.selectAll('circle'), у вас будет больше успеха. В качестве альтернативы, вы можете отказаться от .transition() при определении svg и применить его только к отдельным элементам:

var svg = d3.select('#chart'); 

svg.select(".line").transition() 
    .duration(1000).attr("d", valueline(data)); 

... 

Вот updated fiddle принимает последний подход.

---

Кроме того, для перехода обновлений вы можете изменить масштаб и значение, которые вы используете, чтобы получить новые х, у значения (в соответствии с вашими именами переменных):

//Update all circles 
    svg.selectAll("circle") 
     .data(data) 
     .transition() 
     .duration(1000) 
     .attr("cx", function(d) { 
     return x(d.date); 
     }) 
     .attr("cy", function(d) { 
     return y(d.close); 
     }); 
    }