Question

enter image description here

我正在开发一个气泡图应用程序，它是力图表的衍生物，可以提供一点动作。

以下是一些代码。当我创建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();

我还有其他问题

缩放是一个问题

我通过数据属性设置宽度/高度 - 目前我有一个缩放变量设置，根据图表的宽度调整球体的大小。我想找到一种更科学的方法来确保相应地调整图表的大小，并且元素始终保持中心（不要变得模糊）。

enter image description here

确保较小的元素位于大元素之上我还注意到，小物体可能会随机落在较大的球体下方，是否有办法根据大小来组织球体的渲染，因此较大的元素总是位于底层。

Answer 1

我通过值对数据进行排序解决了第二个问题。

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

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

目前我有一个比例变量，具体取决于图表的宽度 - var scale = methods.width * .005;

但它的说法不是很科学

如果图表宽度为150 http://jsfiddle.net/pPMqQ/150/

图表呈现 - 但气泡不再适合空间。

图表为250像素 http://jsfiddle.net/pPMqQ/151/

d3.js Bubble Force Chart应用程序

1 个答案: