Javascript d3.js和svg不工作时的缩放/平移_Javascript_Html_Svg_D3.js_Zooming

Javascript d3.js和svg不工作时的缩放/平移

javascript html svg d3.js

Javascript d3.js和svg不工作时的缩放/平移,javascript,html,svg,d3.js,zooming,Javascript,Html,Svg,D3.js,Zooming,我是d3.js的新手。我正在尝试使用d3.behavior.zoom（）对svg图形进行缩放/平移，这是一个单独的svg文件。“缩放”工作正常，但“平移”工作不正常。当鼠标在svg区域向下移动，鼠标移动到svg区域之外的html区域时，它会工作。我会请求一些帮助的。谢谢 <style> #container { pointer-events: all;} </style> <head> <script src="d3.v3.js" char

我是d3.js的新手。我正在尝试使用d3.behavior.zoom（）对svg图形进行缩放/平移，这是一个单独的svg文件。“缩放”工作正常，但“平移”工作不正常。当鼠标在svg区域向下移动，鼠标移动到svg区域之外的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>

下面是一个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>


#容器{指针事件：全部；}
var svg、g、obj、比例；
函数initDocument（）{
var margin={top:-5，right:-5，bottom:-5，left:-5}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//设置SVG对象
var object=document.getElementById（'drawing'）；
if（object.contentDocument）
svgDoc=object.contentDocument；
否则{
请尝试{svgDoc=object.getSVGDocument（）；}
捕获（异常）{}
}
svg=d3.select（svgDoc）.select（“svg”）
.attr（“指针事件”、“全部”）；
g=svg。选择（“容器”）
.attr（“指针事件”、“全部”）；
var zoom=d3.behavior.zoom（）
。打开（“缩放”，缩放，假）；
调用（缩放）；
};
函数缩放（）{
比例=d3.event.scale；
g、 属性（“转换”、“转换”+
d3.event.translate.join（“，”+”）比例（“+scale+”）；
}

以下是svg文件：

<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>

<?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>


13
10
6.
5.
4.
3.
PA921
G
E
PA2500
JA2500
B
PA3002
JA3002

为确保d3正确捕获鼠标事件，您需要修改

缩放变量，如下所示：
<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>

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

这确保检测到所有pan事件
<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>

有关您的问题的其他可能解决方案，请参阅。是否收到任何错误消息？你到底看到了什么行为？我没有收到任何错误消息。我看到的是mousewheel事件缩放，效果很好，但svg区域中的平移不起作用，但在svg之外的html区域中，它起作用。平移事件是否生成？平移事件生成于svg区域之外的html区域。当鼠标在svg区域中移动时-未捕获任何事件。当鼠标移出svg区域，但仍在html区域时，会捕获mousemove事件并绘制pan.Hi。谢谢你的回答。我也认为，这个问题是因为iframe。但这是我的限制。我必须在iframe中使用svg文件。我认为d3中有一些bug。不管怎么说，我必须传递什么数据？@user2828370在使用iframe时更新了答案。
<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>