我想要做的是将现有的 SVG(XML 格式)加载到 D3 中。
它工作得很好，直到我开始向 SVG 添加缩放 + 拖动行为。
实际上添加行为似乎可行，但是当我拖动 SVG 中的对象时，会出现奇怪的跳跃(或闪烁)。一次缩放后情况会变得更糟，然后对象移动得比应有的要多得多。
我想您在尝试代码示例后就会立即明白我的意思。
如何让“缩放 + 拖动”发挥应有的作用？
提前致谢
var main_chart_svg = document.body;
d3.xml("https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", function(error, documentFragment) {
if (error) {console.log(error); return;}
var svgNode = documentFragment
.getElementsByTagName("svg")[0];
main_chart_svg.appendChild(svgNode);
d3.selectAll('circle').style('fill', 'green'); //only in order to show, that selections work
//this is where my problem happens
d3.select('svg').call(d3.zoom().on("zoom", function () {
d3.select('svg').attr("transform", d3.event.transform)
}));
});<script src="https://d3js.org/d3.v4.min.js"></script>最佳答案
您正在对 svg 元素执行缩放/平移转换。它通常应用于包含您要缩放的内容的 g 元素。要使用 g，在您的情况下，您需要将此元素插入到现有的 svg 中:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var main_chart_svg = document.body;
d3.xml("https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", function(error, documentFragment) {
if (error) {
console.log(error);
return;
}
var svgNode = documentFragment
.getElementsByTagName("svg")[0];
main_chart_svg.appendChild(svgNode);
var svg = d3.select('svg'),
g = svg.append('g');
g.node().appendChild(svg.select('circle').node());
d3.selectAll('circle').style('fill', 'green'); //only in order to show, that selections work
//this is where my problem happens
d3.select('svg').call(d3.zoom().on("zoom", function() {
g.attr("transform", d3.event.transform)
}));
});
</script>
</body>
</html>或者，如果您不想这样做，您可以直接将缩放应用于圆圈:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var main_chart_svg = document.body;
d3.xml("https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", function(error, documentFragment) {
if (error) {
console.log(error);
return;
}
var svgNode = documentFragment
.getElementsByTagName("svg")[0];
main_chart_svg.appendChild(svgNode);
var svg = d3.select('svg'),
c = d3.select('circle');
c.style('fill', 'green'); //only in order to show, that selections work
//this is where my problem happens
d3.select('svg').call(d3.zoom().on("zoom", function() {
c.attr("transform", d3.event.transform)
}));
});
</script>
</body>
</html>关于javascript - 如何向加载到 D3.js 的外部 SVG 添加缩放 + 拖动行为？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48479297/