Question

我第一次尝试d3.js缩放行为，我很努力让它发挥作用。我的要求是在svg元素中放大，缩小行为，其中应禁用浏览器的缩放行为，并且只有svg内的圆圈在放大/缩小时应增大/减小其半径。

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

这就是我现在所拥有的，任何人都可以帮助我填写它吗？

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

Answer 1

将缩放侦听器绑定到SVG而不是新组。

更改以下代码行

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(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  });
var svg = d3.select('svg').call(zoom);

这是工作JSFiddle

d3js缩放圈子组

1 个答案: