如何更新散點圖？

Question

我有這樣的表格和圖表以散點圖：

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採取後一種方式。

---

此外，對於您的更新轉換，你可能要改變的規模和您使用，讓您的新的x，y值（以匹配您的變量名）值：

//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); 
     }); 
    }