如何更新散点图？

问题描述：

我有这样的表格和图表以散点图：如何更新散点图？

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

而且我尝试更新的散射点的位置时，在第二个表列的值改变。

在此基础上，所以我想我可以只使用一个单一的线路（如我不会改变点的数量，只是他们的位置）：

然而，这段代码：

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

答

的主要问题是：

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

如何更新散点图？

相关推荐