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

我正在SVG中开发一个布局生成器，希望向其中添加拖放和可调整大小的功能。我的网页包含一个主画布（SVG）和一些嵌套的SVG。我希望我的嵌套SVG（可以说是子SVG）是可拖动的。我该怎么做？我在JQuery中搜索过，我们有可拖动和可调整大小的API，但它在SVG中不起作用。如何在d3.js中实现它？任何帮助都会被优先考虑。提前谢谢。

应该可以让你开始了。与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) {
}

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

应该开始了。与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) {
}

---

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

我猜您找不到确切的示例。D3通常处理单个

。多个嵌套的是非常罕见的。相反，你通常会发现一个

，里面有嵌套的

组？我的意思是它们都有相同的功能。但是有更多的选项，而不是有一些区别，例如

部分。但我的意思是，这是不寻常的，不是不可能的。看看下面我的答案。我猜你找不到确切的例子。D3通常处理单个

。多个嵌套的是非常罕见的。相反，你通常会发现一个

，里面有嵌套的

组？我的意思是它们都有相同的功能。但是有更多的选项，而不是有一些区别，例如

部分。但我的意思是，这是不寻常的，不是不可能的。见下面我的答案。