3

我正在开发一个带有一些附加功能的强制导向图形布局：可选链接/节点、工具提示、鱼眼效果，以及——对我的问题很重要——缩放和平移。

现在，缩放效果很好，如下所示：

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

在重绘方法中，基本上是在飞行中反转某些元素的缩放。然而，我的问题是（除了这是一个丑陋的黑客之外），我的边缘宽度是在图形绘制上动态生成的（根据一些图形属性......），所以这种“反转”方法不起作用......

4

2 回答 2

8

  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 + ")");
}
于 2012-11-07T07:58:26.470 回答
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()

于 2012-10-16T15:29:55.023 回答