d3.js氣泡力圖表應用

Question

http://jsfiddle.net/pPMqQ/146/

我正在開發一個氣泡圖的應用程序，是一種力圖表的衍生物，以提供移動一點點。

這是一些代碼。當我創建SVG時 - 我還設置了viewBox - 我認爲這可以用來調整圖表的大小 - 但我無法正確調整比例以獲得正確的縮放比例。

我還在這裏添加了添加節點的代碼 - 隨着節點大小的計算 - 它使用一個縮放變量來影響球體的大小。

        var svg = d3.select(selector) 
          .append("svg") 
           .attr("class", "bubblechart") 
           .attr("width", parseInt(w + margin.left + margin.right,10)) 
           .attr("height", parseInt(h + margin.top + margin.bottom,10)) 
           .attr('viewBox', "0 0 "+parseInt(w + margin.left + margin.right,10)+" "+parseInt(h + margin.top + margin.bottom,10)) 
           .attr('perserveAspectRatio', "xMinYMid") 
          .append("g") 
           .attr("transform", "translate(0,0)"); 

          methods.force = d3.layout.force() 
           .charge(1000) 
           .gravity(100) 
           .size([methods.width, methods.height]) 


          var bubbleholder = svg.append("g") 
            .attr("class", "bubbleholder") 


          var bubbles = bubbleholder.append("g") 
            .attr("class", "bubbles") 

          var labelbubble = bubbleholder.append("g") 
            .attr("class", "labelbubble") 






         // Enter 
         nodes.enter() 
          .append("circle") 
          .attr("class", "node") 
           .attr("cx", function (d) { return d.x; }) 
           .attr("cy", function (d) { return d.y; }) 
           .attr("r", 1) 
           .style("fill", function (d) { return methods.fill(d.label); }) 
           .call(methods.force.drag); 

         // Update 
         nodes 
          .transition() 
          .delay(300) 
          .duration(1000) 
           .attr("r", function (d) { return d.radius*scale; }) 

         // Exit 
         nodes.exit() 
          .transition() 
          .duration(250) 
          .attr("cx", function (d) { return d.x; }) 
          .attr("cy", function (d) { return d.y; }) 
          .attr("r", 1) 
          .remove(); 

我有遺留問題

1. 比例是一個問題

我通過數據屬性設置寬度/高度 - 目前我有一個縮放變量設置爲調整球體的大小取決於圖表的寬度。我希望找到一種更科學的方法確保圖表相應地調整大小，並且要素始終保持中心（不會變得模糊）。

確保較小的元素是在大元件 的頂部我也注意到，小物體可以隨機地落入下方較大的球體，是有一種方法根據尺寸組織渲染球體，所以更大的元素總是位於底層。

Answer 1

我解決了第二個問題，通過值排序數據。

http://jsfiddle.net/pPMqQ/149/

data = data.sort(function(a, b) {return b.value - a.value}) 

目前我有一個尺度變量取決於圖表的寬度 - 變種規模= methods.width * 0.005;

，但它不是很科學每說

如果圖表是150寬度 http://jsfiddle.net/pPMqQ/150/

圖表呈現 - 但氣泡不再適合在該空間。

http://jsfiddle.net/pPMqQ/151/