D3選擇性變焦

Question

我正在研究具有某些附加功能的力導向圖布局：可選鏈接/節點，工具提示，魚眼效果，以及-對於我的問題很重要-縮放和平移。

現在，縮放效果非常好，如下所示：

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");

在重繪方法中，基本上可以即時反轉某些元素的縮放比例。 但是，我的問題是（除了這是一個丑陋的hack），我的邊寬是在圖形繪制時動態生成的（根據某些圖形屬性...），因此這種“反轉”方法不起作用...

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：not偽類：

    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()一起使用的詳細信息