以力为导向放大问题

Question

我已经生成了一个D3可视化(一个力有向图)，它需要缩放和平移。然而，在缩放方面，我遇到了两个问题，我找不到任何合适的例子来说明我如何克服这些问题：

1. 第一个问题是，我遵循了关于缩放的所有例子，这涉及添加分组和添加一个矩形以确保整个区域是可缩放的。如果我将矩形的样式设置为略不透明的蓝色，那么当我放大时，会得到如下的SVG：

​

​

问题是，我可以放大/缩小绝对好，而我有我的鼠标在蓝色的矩形区域。问题是，我希望这是完全不透明的，这意味着，当我放大，它很容易将光标放在这个方框之外，然后你就无法放大。有什么方法可以让SVG本身成为可缩放的，还是可以捕捉到这些事件？

这就是我如何生成不同的层和放大的功能：

function zoomed() {      
  group2.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

svg = d3.select(target)
        .attr("pointer-events", "all")
        .append("svg");

group = svg.append('svg:g')
           .call(d3.behavior.zoom().on('zoom', zoomed))
           .on("dblclick.zoom", null);

group2 = group.append("g");
rect = group2.append('svg:rect')
          .style("opacity", 0.3)
          .attr('width', width)
          .attr('height', height);

1. 我遇到的第二个问题是，我试图根据这个http://bl.ocks.org/mbostock/1846692示例自动调整文本大小。然而，当我尝试过这一点时，我似乎得到的文本呈现得非常糟糕。它似乎受到下列因素的影响：

- Being difficult to read
- Not appearing contained within the circle
- Being so small the entire thing compresses (image 2)

​

​

​

​

​

var texts = planets.append("text")
                .text(function(d) { return d.name; })
                .style("font-size", "24px") // initial guess
                .style("font-size", function(d) { 
                  return Math.min( 2 * d.size, (2 * d.size - 8) / this.getComputedTextLength() * 24) + "px"; 
                })
                .attr("dx", function(d) { return -d.size; })
                .attr("dy", ".35em")
                .style("fill", "white");

我以为SVG会处理这个问题，我知道有些字体大小可能会变小，但是如果你放大，难道不是所有的字体都可以自己处理吗？

我要演示一下JSFiddle http://jsfiddle.net/IPWright83/vo7Lpefs/22/。

Answer 1

我还没有设法解决我的第一个问题(关于缩放框)，但我设法跟踪文本呈现问题。

这实际上是因为每个圆圈/节点都有一个笔画属性来提供白色边框。这也适用于文本元素，当字体非常小时，笔画要比文本的整体填充大得多。从文本元素中删除笔画可以确保它们即使在非常小的时候也呈现出来。