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();
我还有剩下的问题
- 缩放是一个问题
我已经通过数据属性设置了宽度/高度 - 目前我设置了一个缩放变量来根据图表的宽度调整球体的大小。我想找到一种更科学的方法来确保相应地调整图表的大小，并且元素始终保持中心位置（不要变得模糊）。
- 确保较小的元素在大元素之上我还注意到小物体可能会随机落在较大的球体下方，有没有办法根据大小组织球体的渲染，所以较大的元素总是位于底层.
