D3选择性放大(D3 selective Zoom)

我工作的一个力向图的布局增加了一些功能：可选择链接/节点，提示，鱼眼效果，以及 - 我的问题很重要 - 缩放和平移。

现在，变焦效果非常好这样的：

d3 ... .append('svg:g').call(d3.behavior.zoom().on("zoom", redraw))... 

凡重绘功能看起来像这样...

function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}

然而，该方法放大整个SVG图形，包括字体大小，图形的边缘，周围的节点的线笔划的宽度等

是它在某种程度上可以不放大某些元素？ 到目前为止，我所看到的唯一的解决办法是把这样一行（把它从这里http://jsfiddle.net/56RDx/2/ ）

node.attr("font-size", (nodeFontSize / d3.event.scale) + "px");

在再拉法，基本上反转上对飞某些元件的变焦。 我的问题然而，（除了这是一个丑陋的黑客攻击），我的边缘宽度是动态上图的图（根据一些图形属性...）产生的，所以这种“反演”的方法不工作...

Answer 1:

1. 您可以将类添加到您想要触发变焦的元素：

    d3 ... .append('svg:g').classed("some_classname", true).call(d3.behavior.zoom().on("zoom", redraw))... 

   然后做：

    function redraw() { trans = d3.event.translate; scale = d3.event.scale; vis.selectAll("some_classname").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")"); } 

   ---

2. 或者你可以添加一个类你不想触发变焦上，然后使用CSS3的所有元素：不是伪类：

    function redraw() { trans = d3.event.translate; scale = d3.event.scale; vis.selectAll("*:not(.some_classname)").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")"); } 

Answer 2:

我能找到的唯一的解决方案是一个“丑陋的黑客攻击”，如果（我假设你是）你想不放大，例如线条，你应该尝试的下方，它适用于进出都缩放：

演示： http://jsfiddle.net/SO_AMK/gJMTb/

JavaScript的：

function redraw() {
  vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
  vis.attr("font-size", (nodeFontSize / d3.event.scale) + "px");
  vis.selectAll("line.link").style("stroke-width", getStrokeWidth); // Function so it runs for each element individually
}

function getStrokeWidth(){
    if (!this.__data__.stroke) { // Doesn't exist, so set it to the original stroke-width
        this.__data__.stroke = parseFloat(d3.select(this).style("stroke-width"));
        // I found __data__ to be easier than d3's .data()
    }
    return this.__data__.stroke / d3.event.scale + "px";
}

请参阅文档的详细信息，使用功能与style()

文章来源: D3 selective Zoom