Question

我有一个强制布局，它位于特定宽度和高度的矩形内。我在图表的svg中添加了缩放功能和自动调整大小属性，以便可以使用鼠标滚动放大。

问题是：我通过'rect'变量添加的矩形变得可拖动（不知道为什么），并且在缩放时，矩形本身也会放大......我不会追求它。

总结：

一个。我需要将矩形固定在现场（不应该像一个可拖动的对象） B.我需要放大布局本身，同时保持矩形宽度固定。

var width = 1024;
var height = 768;

var xx = d3.scale.sqrt().domain([0,1000]).range([0, width]);
var yy = d3.scale.sqrt().domain([0,1000]).range([0, height]);

var svg = d3.select('#chart').append("svg")
            .attr("viewBox", "0 0 " + width + " " + height )
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("pointer-events", "all")
                .style("fill", '#000000')
            .append("g")
            .attr("transform", "translate(" + 0 + "," + 0 + ")")
            .call(d3.behavior.zoom().x(xx).y(yy).scaleExtent([1, 3]).on("zoom", redraw)).append('g');


 rect = svg.append('rect')
           .attr('width', width+10)
           .attr('height', height+10)
       .attr("transform", "translate(" + 0 + "," + 0 + ")")
           .attr('fill', '#000000');


 function redraw() {
          svg.attr("transform", "translate(" + d3.event.translate + ")"
          + "scale(" + d3.event.scale + ")");
       }

任何帮助都会很棒。感谢。

Zoomable强制布局 - 使SVG矩形固定位置

0 个答案: