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動畫/過渡圈更新

回答

相關問題