d3.js动画/过渡圈更新

我有一个简单的线条图，每5秒钟检查一次更新&如果需要，重新绘制线条/比例。除了数据点，这一切都很好。d3.js动画/过渡圈更新

我在重画中丢失了什么以移动点？图形第一次渲染时，点就在那里。但是在更新时，当线条被重新绘制时它们不会移动。所以我在更新时选择了一个新的数据源，旧的数据点保持不变。

上更新

重绘

var svgAnimate = d3.select("#animateLine").transition(); 

     svgAnimate.select(".line") // change the line 
      .duration(750) 
      .attr("d", valueline(data)); 
     svgAnimate.selectAll(".circle") // change the circle 
      .duration(750) 
      .attr("d", valueline(data)); 
     svgAnimate.select(".x.axis") // change the x axis 
      .duration(750) 
      .call(xAxis); 
     svgAnimate.select(".y.axis") // change the y axis 
      .duration(750) 
      .call(yAxis);

初始绘图：

svgAnimate.selectAll("dot") 
     .data(data) 
    .enter().append("circle") 
     .attr("class", "circle") 
     .attr("r", 5) 
     .style("fill", function(d) { 
      if (d.close <= 400) {return "red"} 
      else { return "black" } 
     ;}) 
     .attr("cx", function(d) { return x(d.date); }) 
     .attr("cy", function(d) { return y(d.close); })

这是我不想要的东西。 enter image description here

来源

2013-04-15 EnigmaRM

你可以设置一个jsFiddle吗？ –

@ChrisJamesC：这是[jsFiddle]（http://jsfiddle.net/UZpHZ/4/）。虽然，我无法让我的数据源在其中正确更新。在我的本地机器上，我使用csv作为源类型。我认为我做了必要的改变，以使其发挥作用。 – EnigmaRM

它不起作用。 –

您的问题是函数valueLine是您用来绘制线条的函数。因此，当再次使用新数据调用它时，您将重绘该行。

对于圆圈属性d没有意义。然而，如果我们认为y轴不发生变化，那么你可以这样做：

svgAnimate.selectAll(".circle") // change the circle 
    .data(newData) 
    .duration(750) 
    .attr("cx", function(d){return x(d.date)};

如果您需要更改y坐标，那么你就必须修改圆的cy属性。

我的代码可能没有那么严格，如果您仍有问题，请张贴jsFiddle。

来源

2013-04-16 02:26:25

Y轴在我的示例中确实发生了变化。实际应用你所做的并不会改变输出。为什么ValueLine不能用于此选择？当我改变线时，它在前面的几行中有效？ – EnigmaRM

'ValueLine'在它得到的输入点之间绘制一条**线**，它无助于绘制圆圈。如果yAxis改变，那么对yAxis执行相同的操作。 –

我在更新图表圈时也遇到了一些问题。这里是工作提琴，可能有些人对未来的搜索，如果他们有同样的问题： http://jsfiddle.net/noo8k17n/

的问题是这一行：

var svgAnimate = d3.select("#animateLine").transition();

它需要被移除，然后在更新方法你可以添加和删除圈子。

来源

2014-11-17 13:40:40 sanyooh

d3.js动画/过渡圈更新

回答

相关问题