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

Question

I Had Create some rectangle and want to zoom it. 我已经创建了一个矩形，并希望将其缩放。

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

when I use the zoom effect, d3.event.translate changed properly, but its not transformed. 当我使用缩放效果时，d3.event.translate正确更改，但未更改。

[enter image description here][1] [在此处输入图片描述] [1]

Script 脚本

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

Your rectangle is not in the g you are zooming... 您的矩形不在您要缩放的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);
};

Working example: 工作示例：

 <!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 个解决方案

解决方案1
0 已采纳 2015-10-17 19:38:06

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-17 19:38:06

解决方案1
0 已采纳 2015-10-17 19:38:06