0

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

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

加起来：

A. 我需要将矩形固定在现场（不应该像可拖动的对象一样） 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 + ")");
       }

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

4

0 回答 0