實時D3氣泡圖（圓形包）

Question

我試圖在d3.js中創建實時氣泡圖圖表本身很簡單，因爲所顯示的數據是非嵌套數組。它只是不同大小的泡泡。

與來自通過AJAX的MVC控制器取出初始數據的初始氣泡圖表創建這樣的：

var canvas = d3.select("#dynD3") 
    .append("svg") 
    .attr("width", 800) 
    .attr("height", 500) 
    .append("g") 
    .attr("transform", "translate(50, 50)"); 

var pack = d3.layout.pack() 
    .size([800, 450]) 
    .padding(10); 

d3.json("/Nice/d3_getCoolBubble", function (data) { 

    var nodes = pack.nodes(data); 
    console.log(data); 

    var node = canvas.selectAll(".node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .attr("transform", function (d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    node.append("circle") 
    .attr("class", function (d) { return d.children ? "noupdate" : "update" }) 
    .attr("id", function (d) { return d.name; }) 
    .attr("r", function (d) { return d.r }) 
    .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" }) 
    .attr("stroke", function (d) { return d.children ? "#fff" : "#000" }) 
    .attr("stroke-width", "2"); 

    node.append("text") 
    .text(function (d) { return d.children ? "" : d.name; }); 

附加到創建的初始氣泡的是將

 tick() 

呼叫功能。這個函數應該負責從MVC控制器獲取新數據，然後執行轉換。在過渡結束後，該方法再次調用自身：

function tick() { 

     $.ajax({ 
      type: "GET", 
      async: false, 
      url: "/Nice/d3_getCoolBubble", 
      data: {}, 
      success: function (result) { 

       console.log(result); 

       var update = canvas.selectAll(".update"); 

       update.transition() 
        .duration(5000) 
        .attr("transform", function (d) { 
         return "translate(" + d.x + "," + d.y + ")"; 
        }) 
        .each("end", tick); 
      } 
     }); 
    }; 
}); 

我會很高興，如果有人有一個很好的鏈接，例如或暗示對如何執行更新。我想這一定是像

• 獲取新數據
• 計算新模式
• 添加/刪除是新/不再在新獲取的數據
• 開始轉換節點的所有現有節點

感謝您的任何提示！

Answer 1

IE決定自動緩存標準的「d3.json（）」請求。所以我換了一個明確的jQuery ajax請求'cache：false'。在其基本形式中，更新現在可行，儘管代碼仍然可能展現出我對d3的一些行爲。

我想我會用它來可視化用戶觀看在我們的內部網絡電視網站TV頻道的數量，但我想我會切換到折線圖..不過，下面的代碼：

function dynamicBubbles() { 

// call redraw every 5 sec 
setInterval(function() { 
    redraw(); 
}, 5000); 

var width = 960; 
var height = 500; 

// construct SVG container 
var chart = d3.select("#dynD3").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(50, 50)"); 

// define our pack 
var pack = d3.layout.pack() 
    .size([width, height - 50]) 
    .padding(10); 

function redraw() { 

// get data from MVC controller 
return $.ajax({ 
    type: "GET", 
    async: true, 
    cache: false, 
    url: "/Nice/d3_getCoolBubble", 
    data: { }, 
    success: function (data) { 

     // asign new data to existing layout 
     var node = chart.selectAll(".node") 
      .data(pack.nodes(data), function (d) { return d.name }); 

     // access brand new data 
     node.enter().append("g") 
       .classed("node", true) 
       .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) 
      .append("circle") 
       .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" }) 
       .attr("stroke", function (d) { return d.children ? "#fff" : "#ADADAD" }) 
       .attr("stroke-width", "1") 
       .transition() 
       .attr("r", function (d) { return d.r }); 

     node.transition() 
      .duration(2000) 
      .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }); 


     node.select("circle") 
      .transition() 
      .duration(2000) 
      .attr("r", function (d) { return d.r; }) 

     node.append("text") 
      .text(function (d) { return d.name; }); 

    } 
});