1

我一直在设置图表以根据 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; })
4

0 回答 0