使用Force Directed缩小问题

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示例自动调整文本大小。当我尝试这个时，我似乎得到的文字很糟糕。它似乎受到了：

   • 难以阅读
   • 未出现在圈子中
   • 如此小，整个事物压缩（图像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

我还没有设法解决我的第一个问题（关于缩放框）但是我确实设法跟踪文本渲染问题。

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