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/