2

我是 d3.js 的新手。我正在尝试使用 d3.behavior.zoom() 在 svg 绘图上进行缩放/平移，这是一个单独的 svg 文件。缩放效果很好，但平移无法正常工作。它在 svg 区域中的 mousedown 和 svg 区域之外的 html 区域中的 mousemove 时起作用。我会寻求一些帮助。谢谢。

这是html文件的代码。 

<style>
    #container { pointer-events: all;}
</style>

<head>

<script src="d3.v3.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="./style.css"/>


    <script> 
        var svg, g, obj, scale;
        function initDocument() {
        var margin = {top: -5, right: -5, bottom: -5, left: -5},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

        // Set SVG object
        var object = document.getElementById('drawing');

        if (object.contentDocument)  
            svgDoc = object.contentDocument;
        else {
            try {svgDoc = object.getSVGDocument();}
            catch(exception) {}
        }

        svg = d3.select(svgDoc).select("svg")
        .attr("pointer-events", "all");

        g = svg.select("#container")
        .attr("pointer-events", "all");

        var zoom = d3.behavior.zoom()
        .on("zoom", zoomed,false);

        svg.call(zoom);
        };

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


    </script> 

</head>

<body>
    <div>
        <iframe id="drawing" type="image/svg+xml" 
        src="testDraw.svg"
        width="975px" height="480px" onload="initDocument();">
        </iframe>

    </div>

</body>
</html>

这是svg文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="svg_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"                 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="testDraw.wd" width="03910" height="02380" viewBox="-100 -100 04410 02480">
<g id="container">
<g id="PA921" stroke="BLACK   " fill="BLACK   " >
<path d="
M 01241 01411 L 01230.01 01411.01 L 01227 01400 L 01220 01421 L 01217 01411 L 01207.01             01411.01 L 01207.01 01669.01 L 01208 01675 L 01210 01679 L 01215 01681 L 01220 01683 L 01241.01 01683.01 L 01241.01 01411.01" />
<text x="01216" y="01652" style="font-size:018px" >
13
</text>
<text x="01216" y="01635" style="font-size:018px" >
10
</text>
<text x="01221" y="01499" style="font-size:018px" >
6
</text>
<text x="01221" y="01482" style="font-size:018px" >
5
</text>
<text x="01221" y="01465" style="font-size:018px" >
4
</text>
<text x="01221" y="01448" style="font-size:018px" >
3
</text>
<text x="01198" y="01705" style="font-size:018px" >
PA921
</text>
</g>
<g id="PA2500" stroke="BLACK   " fill="BLACK   " >
<path d="
M 00612 00561 L 00622.01 00561.01 L 00625 00550 L 00632 00571 L 00635 00561 L 00646.01 00561.01 L 00646.01 00183.01 L 00644 00177 L 00642 00173 L 00637 00171 L 00632 00170 L 00612.01 00170.01 L 00612.01 00561.01" />
<text x="00626" y="00479" style="font-size:018px" >
G
</text>
<text x="00626" y="00224" style="font-size:018px" >
E
</text>
<text x="00654" y="00158" style="font-size:018px" >
PA2500
</text>
</g>
<g id="JA2500" stroke="BLACK   " fill="BLACK   " >
<path d="
M 00612 00170 L 00595.01 00170.01 L 00595.01 00561.01 L 00612.01 00561.01 L 00612.01     00170.01" />
<text x="00535" y="00158" style="font-size:018px" >
JA2500
</text>
</g>
<g id="PA3002" stroke="BLACK   " fill="BLACK   " >
<path d="
M 01377 00289 L 01387.01 00289.01 L 01390 00278 L 01397 00299 L 01400 00289 L 01411.01 00289.01 L 01411.01 00166.01 L 01409 00160 L 01407 00156 L 01402 00154 L 01397 00153 L 01377.01 00153.01 L 01377.01 00289.01" />
<text x="01391" y="00224" style="font-size:018px" >
B
</text>
<text x="01419" y="00158" style="font-size:018px" >
PA3002
</text>
</g>
<g id="JA3002" stroke="BLACK   " fill="BLACK   " >
<path d="
M 01377 00153 L 01360.01 00153.01 L 01360.01 00289.01 L 01377.01 00289.01 L 01377.01 00153.01" />
<text x="01283" y="00158" style="font-size:018px" >
JA3002
</text>
</g>

</g>
</svg>
4

1 回答 1

0

为确保鼠标事件被 正确捕获d3，您需要zoom像这样修改变量：

var zoom = d3.behavior.zoom()
           .on('zoom', zoomed,false)
           .on('zoomstart', function() {
               if (d3.event.sourceEvent.type != 'mousewheel') {
                   $('#drawing').css('pointer-events', 'none');
               }
            })
           .on('zoomend', function() {
               if (d3.event.sourceEvent != null) {
                   $('#drawing').css('pointer-events', 'all');
               }
            });

这可确保检测到所有平移事件。

有关您的问题的其他可能解决方案，请参阅此堆栈问题。

于 2013-10-01T15:22:20.863 回答