javascript - d3js 缩放圆圈组

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

将缩放监听器绑定(bind)到 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