我一直在设置图表,以参考svg或边界框的宽度和高度进行动态缩放,并且使用节点和节点边框这相对简单。通过使用d.depth并指定所需的比率来为一定深度的节点分配相对半径,这不会给我带来任何问题,较低深度的节点会变小以避免重叠。然后,对于节点边界,我指定节点半径和边界厚度之间的比率。
这已被证明是通过缩放容器添加缩放功能时出现的问题的理想解决方案。这就是问题所在:
文本,节点和节点边界不再束缚,但链接保持相同的权重。
我还想缩放节点之间边缘的厚度,但我不知道如何识别边缘,以便我可以指定相对于父节点或子节点半径的厚度
d3.json("aviation.json", function(root) {
var nodes = balloon.nodes(root),
links = balloon.links(nodes);
var link= svg.selectAll("path")
.data(links)
.enter().append("path")
.attr("d",diagonal)
.attr("stroke", "black")
.attr("shape-rendering", "auto")
.attr("fill", "none")
.data(nodes)
.attr("stroke-width", function(d) {return (1/5000*diameter);});
var node = svg.selectAll("g.node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node");
node.append("circle")
.attr("r", function(d) { return d.r;})
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("fill", "white")
.attr("opacity", "0.05")
.attr("stroke-width", function(d) {return d.r/600;}) //here I am referecing d.r
//to find the stroke width.
.attr("stroke-opacity", ".5")
.on("Click", function(d) { return zoomClick});
var text = svg.selectAll("g.text")
.data(nodes)
.enter()
.append("text")
.attr("dx", function(d) { return d.x })
.attr("dy", function(d) { return d.y })
.attr("font-family", "Helvetica")
.attr("font-size", function(d) {return d.children ? d.r/7 : d.r/4;})
.attr("stroke-width", function(d) {return d.r/400;})
.attr("stroke-opacity", "1")
.attr("fill", "white")
.attr("pointer-events", "all")
.style("text-anchor", "middle")
.text(function(d) { return d.name; })