有没有办法放大D3力布局图？ [英] Is there a way to zoom into a D3 force layout graph?

问题描述

D3具有强制定向布局此处。有没有办法添加缩放到这个图表？目前，我能够捕获鼠标滚轮事件，但我不知道如何写redraw功能本身。任何建议？

  var vis = d3.select（＃graph）
 .append（svg：svg ）
 .call（d3.behavior.zoom（）。on（zoom，redraw））//<  -  redraw function 
 .attr（width，w）
 .attr（height，h）; 
  

解决方案

Update 6/4/14

另请参阅 Mike Bostock的回答 D3 v.3和相关示例。

p>我认为@ ahaarnos的答案是更好的，如果你想要整个SVG平移和缩放。在下面的答案中嵌套的 g 元素只有在同一个SVG中有非缩放元素时才是必要的（不是原始问题中的情况）。如果您 将行为应用于 g 元素，则背景 rect 元素，以确保 g 接收指针事件。

原始答案 / p>

我的工作原理是基于 zoom-pan-transform example - 您可以在这里查看我的jsFiddle： http://jsfiddle.net/nrabinowitz/QMKm3/

这比我想象的要复杂一些 - 你必须嵌套多个 g 它工作，将SVG的指针事件属性设置为 all ，然后附加一个背景矩形接收指针事件（否则只有当指针在节点或链接上时才有效）。 redraw 函数相对简单，只需在最内层 g 上设置转换：

  var vis = d3.select（＃chart）
 .append（svg：svg）
 .attr ，w）
 .attr（height，h）
 .attr（pointer-events，all）
 .append（'svg：g'）
 .call（d3.behavior.zoom（）。on（zoom，redraw））
 .append（'svg：g'）; 
 
 vis.append（'svg：rect'）
 .attr（'width'，w）
 .attr（'height'，h）
 .attr （'fill'，'white'）; 
 
 function redraw（）{
 console.log（here，d3.event.translate，d3.event.scale）; 
 vis.attr（transform，
translate（+ d3.event.translate +）
 +scale（+ d3.event.scale +）） ; 
} 
  

这有效地缩放整个SVG，因此也缩放笔触宽度，放大图片。

还有另一个示例< a>，说明了类似的技术。

D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any suggestions?

    var vis = d3.select("#graph")
        .append("svg:svg")
        .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function
        .attr("width", w)
        .attr("height", h);

解决方案

Update 6/4/14

See also Mike Bostock's answer here for changes in D3 v.3 and the related example. I think this probably supersedes the answer below.

Update 2/18/2014

I think @ahaarnos's answer is preferable if you want the entire SVG to pan and zoom. The nested g elements in my answer below are really only necessary if you have non-zooming elements in the same SVG (not the case in the original question). If you do apply the behavior to a g element, then a background rect or similar element is required to ensure that the g receives pointer events.

Original Answer

I got this working based on the zoom-pan-transform example - you can see my jsFiddle here: http://jsfiddle.net/nrabinowitz/QMKm3/

It was a bit more complex than I had hoped - you have to nest several g elements to get it to work, set the SVG's pointer-events attribute to all, and then append a background rectangle to receive the pointer events (otherwise it only works when the pointer is over a node or link). The redraw function is comparatively simple, just setting a transform on the innermost g:

var vis = d3.select("#chart")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all")
  .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
  .append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'white');

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  vis.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

This effectively scales the entire SVG, so it scales stroke width as well, like zooming in on an image.

There is another example that illustrates a similar technique.

这篇关于有没有办法放大D3力布局图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！