Question

我创建了一些矩形，想要缩放它。

function zoomed() {
    console.log(d3.event.translate);
    console.log(d3.event.scale);
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

当我使用缩放效果时，d3.event.translate已正确更改，但未进行转换。

[在此处输入图像说明] [1]

脚本

var zoom = d3.behavior.zoom()
     .scaleExtent([1, 10])
     .on("zoom", zoomed);

var svg = wrap.append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.bottom + margin.top)
     .style("margin-left", -margin.left + "px")
     .style("margin-right", -margin.right + "px")
     .classed('network-svg', true)
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     .style("shape-rendering", "crispEdges")
     .call(zoom);

 var g = svg.append('g');

 function zoomed() {
     console.log(d3.event.translate);
     console.log(d3.event.scale);
     g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
 }

 var drawRectangle = function(rect) {

     svg.append("rect")
         .style("fill", "none")
         .style("stroke", "blue")
         .style("stroke-width", "2")
         .attr("x", rect.x)
         .attr("y", rect.y)
         .attr("width", rect.width)
         .attr("height", rect.height);
};

Answer 1

您的矩形不在g缩放...

var drawRectangle = function(rect) {
     g.append("rect") //<-- append it to the g you are zooming
         .style("fill", "none")
         .style("stroke", "blue")
         .style("stroke-width", "2")
         .attr("x", rect.x)
         .attr("y", rect.y)
         .attr("width", rect.width)
         .attr("height", rect.height);
};

工作示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <script>
    var width = 500,
        height = 500,
        margin = {left: 10, top: 10, right: 10, bottom: 10};
  
    var zoom = d3.behavior.zoom()
      .scaleExtent([1, 10])
      .on("zoom", zoomed);

    var svg = d3.select('body').append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.bottom + margin.top)
      .style("margin-left", -margin.left + "px")
      .style("margin-right", -margin.right + "px")
      .classed('network-svg', true)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .style("shape-rendering", "crispEdges")
      .call(zoom);

    var g = svg.append('g');

    function zoomed() {
      console.log(d3.event.translate);
      console.log(d3.event.scale);
      g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }
    var drawRectangle = function(rect) {

      g.append("rect")
        .style("fill", "none")
        .style("stroke", "blue")
        .style("stroke-width", "2")
        .attr("x", rect.x)
        .attr("y", rect.y)
        .attr("width", rect.width)
        .attr("height", rect.height);
    };
    
    drawRectangle({x: 100, y: 100, width: 100, height: 100})
  </script>
</body>

</html>

无法在D3.js中获得缩放效果

1 个答案: