d3js缩放圈子组 [英] d3js zooming groups of circles

问题描述

我第一次尝试d3.js缩放行为，我很努力得到它的工作。我的要求是有一个放大，缩小行为在svg元素，其中浏览器的缩放行为应该禁用，只有svg中的圆圈应该增加/减少其半径放大/缩小。

总之，当用户滚动鼠标时，svg的宽度，高度不应该改变。只是圈子应该改变其半径。

这是我现在，任何人都可以帮助我填补它？

 < g& 
< circle id ='top'cx =180cy =120r =30style =stroke：white; stroke-width：2px; fill：white/> 
< / g> 
< g> 
< circle id ='top'cx =200cy =220r =30style =stroke：white; stroke-width：2px; fill：white/> 
< / g> 
< g> 
< circle id ='top'cx =320cy =150r =50style =stroke：white; stroke-width：2px; fill：white/> 
< / g> 
  

  var zoom = d3.behavior.zoom（）
 .scaleExtent（[1,8]）
 .on（zoom，function（）{
 
 console .log（'zoom'）; 
 
 var graph = d3.select（'svg'）; 
 
 graph 
 .selectAll（'g'）
 .attr（transform，translate（+ d3.event.translate +）scale（+ d3.event.scale +））; 
 
 
} ）; 
 
 
 
 var svg = d3.select（'svg'）。append（'g'）。call（zoom）; 
  

解决方案

将缩放监听器绑定到SVG

$ b 更改下列代码行

  var svg = d3 .select（'svg'）。append（'g'）。call（zoom）; 
  

至

  var svg = d3.select（'svg'）。call（zoom）; 
   

完成代码：

  var zoom = d3.behavior.zoom（）
 .scaleExtent（[1,8]）
 .on（zoom，function {
 var graph = d3.select（'svg'）; 
 graph 
 .selectAll（'g'）
 .attr（transform，translate .event.translate +）scale（+ d3.event.scale +））; 
}）; 
 var svg = d3.select（'svg'）。call（zoom）; 
  

这里是工作的 JSFiddle

I am trying d3.js zoom behavior for the first time, I am quite struggling to get it worked. My requirement is to have a zoom in, zoom out behaviour in a svg element where browser's zoom behaviour should be disabled and only the circles inside the svg should increase/decrease its radius upon zoom in/out.

In summary, when the user scrolls the mouse the svg width, height should not change. Just the circles should change its radius.

This is what I have now, can anyone help me to fill it in?

<g>
    <circle id='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
    <circle id='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
    <circle id='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>

var zoom = d3.behavior.zoom()
            .scaleExtent([1, 8])
            .on("zoom", function () {

            console.log('zooming');

            var graph = d3.select('svg');

            graph
                .selectAll('g')
                .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");


        });



    var svg = d3.select('svg').append('g').call(zoom);

解决方案

Bind the zoom listener to the SVG instead of the new group.

Change following line of code

var svg = d3.select('svg').append('g').call(zoom);

To

var svg = d3.select('svg').call(zoom);

Complete Code:

var zoom = d3.behavior.zoom()
  .scaleExtent([1, 8])
  .on("zoom", function() {    
    var graph = d3.select('svg');
    graph
      .selectAll('g')
      .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  });
var svg = d3.select('svg').call(zoom);

Here is the working JSFiddle

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