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

我已经创建了一些矩形并想放大它。无法在D3.js中获得缩放效果

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); 
};

来源

2015-10-16 Dima Savchenko

https://drive.google.com/file/d/0B67X5lS39Vq9anlET3c2UHRJMm8/view?usp=sharing –

链接到控制台日志 –

您的矩形不在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="[email protected]" 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>

来源

2015-10-17 19:38:06 Mark

谢谢，我一不留神！ –

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

回答

相关问题