D3选择性缩放 [英] D3 selective Zoom

问题描述

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

现在，缩放效果非常好：

  d3 ... .append（'svg：g '）.call（d3.behavior.zoom（）。on（zoom，redraw））... 
  

$ b b

其中重绘函数看起来像这样...

  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）;在重绘方法中，
  
基本上反转缩放某些元素。我的问题是，然而（除了这是一个丑陋的黑客），我的边缘宽度是动态生成的图形绘制（根据一些图表属性...），所以这个'inversiontion'方法不工作... 
解决方案
 
 
 
 
您可以向要触发放大的元素添加类： 
  d3 ... .append（'svg：g'）。classed（some_classname，true）.call .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 +））; 
} 
  
 
 
 
 
 
 
 
可以向所有不想触发缩放的元素添加类，然后使用CSS3：not伪类：
  function redraw（）{
 trans = d3.event.translate; 
 scale = d3.event.scale; 
 vis.selectAll（*：not（.some_classname））。attr（transform，translate（+ trans +）+scale 
} 
  
 
 
 
 
I am working on a force directed graph layout with some added features: selectable links/nodes, tooltips, fisheye effect, and -- important for my question -- zoom and pan.

Now, the zooming works very well like this:
d3 ... .append('svg:g').call(d3.behavior.zoom().on("zoom", redraw))... 
Where the redraw function looks like this...
function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}
However, this method zooms the entire SVG graphic, including font sizes, graph edges, the line stroke-widths surrounding the nodes, etc.

Is it somehow possible not to zoom certain elements? The only solution I have seen so far is to put a line like this (took it from here http://jsfiddle.net/56RDx/2/) 
node.attr("font-size", (nodeFontSize / d3.event.scale) + "px");
in the redraw method, to basically invert the zooming on certain elements on the fly. My problem is however (apart from this being an ugly hack), that my edge-widths are dynamically generated on graph-drawing (according to some graph properties...), so this 'invertion' method does not work...
解决方案

you can add a class to the element you want to trigger the zoom on:
d3 ... .append('svg:g').classed("some_classname", true).call(d3.behavior.zoom().on("zoom", redraw))...
then do:
function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.selectAll("some_classname").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}



or you can add a class to all elements you don't want to trigger the zoom on then use the CSS3 :not pseudo-class:
function redraw() {
  trans = d3.event.translate;
  scale = d3.event.scale;
  vis.selectAll("*:not(.some_classname)").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}



                        
这篇关于D3选择性缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！