html使用d3缩放

d3 Api

https://github.com/tianxuzhang/d3.v4-API-Translation

html

<div class="layout-warp" id="layout-warp">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                <foreignObject x="0" y="0" width="748" height="100%">
                    <body width="748" height="100%" style="max-width: 100%;">
                        <div class="page-wrap" id="page-wrap">
                            ...
                        </div>
                    </body>
                </foreignObject>
            </svg>
        </div>

　　js引入d3后，监听器缩放:

var svg = d3.select('svg');
            var zoom = d3.zoom()//缩放配置
                .scaleExtent([0.4, 5])//缩放比例
                .on("zoom", function (event) {//缩放函数
                    svg.select("foreignObject").attr("transform", event.transform);
                });
            svg.call(zoom);

　　

 

posted @ 2020-10-10 18:15  居无常  阅读(533)  评论(0)    收藏  举报