躍遷D3 - 複製泡沫，而不是氣泡轉變

我試圖創建一個類似於此示例中的東西：Wealth and Health of Nations：躍遷D3 - 複製泡沫，而不是氣泡轉變

enter image description here

我的數據來自一個JSON文件，就像例子，但當我添加轉換時，我得到重複的氣泡。而不是泡泡從A點過渡到B點，我得到了2個泡泡（一個用於A點，另一個用於B點）。一般而言，過渡不能區分相同泡泡的2個數據點或2個獨立泡泡。

看看這個例子，我錯過了插值和平分函數。我一直無法掌握他們的工作方式，以及我做錯了什麼。這是什麼導致我的圖形中的問題？

另外，有人可以給我一個關於平分線程和插值如何在d3中工作的例子嗎？

代碼：

g = d3.select("#animation") 
       .append("svg") 
       .attr("width", width) 
       .attr("height", height); 

     x_extent = [0, 100]; 
     x_scale = d3.scale.linear().domain(x_extent).range([margin + 20, width - 30]); 

     y_extent = [0, 60]; 
     y_scale = d3.scale.linear().domain(y_extent).range([height - margin, margin]); 


     r_scale = d3.scale.linear().domain([0, d3.max(jsondata, function (d) { return d.MSVMMboe; })]).range([2, 30]); 

     g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }).enter().append("circle") 
         .attr("cx", function (d) { return x_scale(d.PercentageComplete * 100) }) 
         .attr("cy", function (d) { return y_scale(d.GPoS * 100) }) 
         .attr("r", function (d) { return r_scale(d.MSVMMboe) }) 
         .attr("stroke", "blue") 
         .attr("stroke-width", 1) 
         .attr("opacity", 0.6) 
         .attr("fill", "red"); 


         //add transition 

         g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }) 
         .transition() 
         .duration(1000);

來源

2012-10-29 user1783490

聽起來就像你在過渡期間添加了新的元素，也就是說你有類似'.data（...）。append（...）。transition（...）'的東西。刪除'.append（...）'或其他任何東西。沒有向我們展示實際的代碼，不可能告訴你究竟在哪裏出錯了。 –

我已添加代碼，謝謝！ – user1783490

你還沒有告訴你想改變的過渡。例如，您需要添加一些屬性更改。查看d3網站的示例和教程。

來源

2012-10-31 09:19:00

最初我了下列文件： g.selectAll（「圓圈」）。數據（jsondata，函數（d）{返回d.EffectiveDate;}） .transition（） .duration（1000） .attr（」（d）{return x_scale（d.PercentageComplete * 100）}） .attr（「cy」，function（d）{return y_scale（d.GPoS * 100）}）我想要泡泡要做的是去下一個（cx，cy）點，但它不能識別哪一個是下一個點。下一點有泡泡名稱和泡泡ID的共同點，它有一個區別它的日期EX：bubble A date 10-01-2010;泡沫B日期12-31-2010。 – user1783490

我用2個不同的數據集創建了一個簡單的演示，並且工作正常，因爲我已經設置了從dataset1中的點到dataset2中的點的轉換，但是因爲我切換到json文件，所有點都位於單個「數據集」這就是轉換現在無法識別的內容 – user1783490

d3沒有什麼魔力 - 轉換不能識別任何東西，你必須告訴它該做什麼。您必須確定下一個點並相應地設置屬性。 –

躍遷D3 - 複製泡沫，而不是氣泡轉變

回答

相關問題