有没有办法在 svg d3.js 中添加拖放功能？答案

【问题标题】：is there a way to add drag and drop in svg d3.js?有没有办法在 svg d3.js 中添加拖放功能？
【发布时间】：2017-05-25 04:56:27
【问题描述】：

我正在开发 SVG 中的布局构建器，并希望为其添加拖放和可调整大小的功能。我的网页包含一个主画布（SVG）和一些嵌套的 SVG。我希望我的嵌套 SVG（你可以说是子 SVG）是可拖动的。我怎样才能做到这一点？我在 JQuery 中搜索了我们有可拖动和可调整大小的 API，但它在 SVG 中不起作用。如何在 d3.js 中实现它？任何帮助将是首选。提前致谢。

【问题讨论】：

猜你找不到你要找的确切例子。 D3 通常处理单个<svg>。多个嵌套的非常少见。相反，您通常会发现一个 <svg> 内部有嵌套的 <g> 组。
不是和有更多的选择
有一些区别，比如<defs>部分。但我的意思只是它不常见，并非不可能。请参阅下面的答案。

标签： jquery d3.js svg

【解决方案1】：

Mike Bostock's Circle Dragging example 应该可以帮助您入门。与 jQuery 相比，最低限度是：

svg.selectAll("svg").call(d3.drag().on("drag", dragged));

function dragged(d) {
  d3.select(this)
    .attr("x", d3.event.x)
    .attr("y", d3.event.y);
}

但最好先将 SVG 元素加入数据对象，然后再修改数据而不是直接修改元素：

svg.selectAll("svg").data(elements)
  .enter().append("svg")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("width", function(d) { return d.width; })
    .attr("height", function(d) { return d.height; })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);

function dragstarted(d) {
  d3.select(this).raise();
}

function dragged(d) {
  d3.select(this)
    .attr("x", d.x = d3.event.x)
    .attr("y", d.y = d3.event.y);
}

function dragended(d) {
}

要考虑鼠标指针偏移，并将拖放操作转换为重新缩放操作，您必须相应地填写拖动处理函数。

【讨论】：