Javascript d3在一个SVG组中拖动多个文本元素

我不熟悉使用d3.js。我试图在svg组中附加多个文本元素。这样，我希望能够拖动多个文本组。
举个例子：

    export function testNode (config = {}) {
    let { svg, rectX, rectY, text1, text2 } = config
    var data = [{ x: rectX, y:rectY, label: text1, label2: text2, labelX: rectX + 100, labelY: rectY + 200, labelX2: rectX + 300, labelY2: rectY + 300 }]
        var group = svg.append("g")
                .selectAll("g")
        .data(data)
        .enter()
                .append("g")
                .attr("transform",
                    "translate(" + 0 + "," + 0 + ")")
                .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended));

        group.append("text")
                .data(data)
                .attr("x", (d) => { return d.labelX })
                .attr("y", (d) => { return d.labelY })
                .attr("font-size", "1em")
                .attr("color", "black")
                .text((d) => { return d.label });

            group.append("text")
                .data(data)
                .attr("x", (d) => { return d.labelX2 })
                .attr("y", (d) => { return d.labelY2 })
                .attr("font-size", ".75em")
                .attr("color", "black")
                .attr("class", "label")
                .text((d) => { return d.metricValue_01 });

function dragStarted() { 
 d3.select(this).raise().classed("active", true);
}

function dragged(d) {
d3.select(this).select("text")
 .attr("x", d.labelX = d3.event.x + 10)
 .attr("y", d.labelY = d3.event.y + 20);

d3.select(this).select("text")
 .attr("x", d.labelX2 = d3.event.x + 10)
 .attr("y", d.labelY2 = d3.event.y + 20);

function dragended() {
    d3.select(this).classed("active", false);
}

---

如果使用selectAll方法，文本会聚集在一起。因此，我想知道是否可以根据给定的坐标（拖动时）将文本组拖动到正确的位置。无论如何，如果我需要提供任何进一步的信息，请让我知道。谢谢

如果您想选择第二个标签，但不想使用

selectAll

，因为它同时选择了这两个标签，您可以在追加标签时指定标签类，在拖动标签时选择标签类：

d3.select(this).select(".bigLabel")
 .attr("x", d.labelX = d3.event.x + 10)
 .attr("y", d.labelY = d3.event.y + 20);

d3.select(this).select(".smallLabel")
 .attr("x", d.labelX2 = d3.event.x + 10)
 .attr("y", d.labelY2 = d3.event.y + 20);

当然，除非指定偏移，否则这将为两个标签设置相同的坐标，如下所示：

var数据=[
{x:100，x2:100，y:100，y2:120，标签：“label1”，值：“17%”，
{x:300，x2:300，y:200，y2:220，标签：“label2”，值：“83%”，
{x:100，x2:100，y:200，y2:220，标签：“label3”，值：“11%”，
{x:300，x2:300，y:100，y2:120，标签：“label4”，值：“96%”
];
var svg=d3.选择（“svg”）；
var labels=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.call（d3.drag（）
。打开（“拖动”，拖动））；
标签。附加（“文本”）
.attr（“字体大小”、“1em”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.text（函数（d）{返回d.label；}）
.attr（“类别”、“标签1”）；
标签。附加（“文本”）
.attr（“字体大小”，“.75em”）
.attr（“x”，函数（d）{返回d.x2；}）
.attr（“y”，函数（d）{返回d.y2；}）
.text（函数（d）{返回d.value；}）
.attr（“类别”、“标签2”）；
函数拖动（d）{
var x=d3.event.x；
变量y=d3.event.y；
d3.选择（本）
.选择（“.label1”）
.attr（“x”，函数（d）{返回d.x=x；}）
.attr（“y”，函数（d）{返回d.y=y；}）
d3.选择（本）
.选择（“.label2”）
.attr（“x”，函数（d）{返回d.x2=x；}）
.attr（“y”，函数（d）{返回d.y2=y+20；}）
}

文本{
文本锚定：中间；
光标：指针；
}

---

如果要选择第二个标签，但不想使用

selectAll

，因为它同时选择了这两个标签，则可以在追加标签时指定标签类，并在拖动标签时选择标签类：

d3.select(this).select(".bigLabel")
 .attr("x", d.labelX = d3.event.x + 10)
 .attr("y", d.labelY = d3.event.y + 20);

d3.select(this).select(".smallLabel")
 .attr("x", d.labelX2 = d3.event.x + 10)
 .attr("y", d.labelY2 = d3.event.y + 20);

当然，除非指定偏移，否则这将为两个标签设置相同的坐标，如下所示：

var数据=[
{x:100，x2:100，y:100，y2:120，标签：“label1”，值：“17%”，
{x:300，x2:300，y:200，y2:220，标签：“label2”，值：“83%”，
{x:100，x2:100，y:200，y2:220，标签：“label3”，值：“11%”，
{x:300，x2:300，y:100，y2:120，标签：“label4”，值：“96%”
];
var svg=d3.选择（“svg”）；
var labels=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.call（d3.drag（）
。打开（“拖动”，拖动））；
标签。附加（“文本”）
.attr（“字体大小”、“1em”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.text（函数（d）{返回d.label；}）
.attr（“类别”、“标签1”）；
标签。附加（“文本”）
.attr（“字体大小”，“.75em”）
.attr（“x”，函数（d）{返回d.x2；}）
.attr（“y”，函数（d）{返回d.y2；}）
.text（函数（d）{返回d.value；}）
.attr（“类别”、“标签2”）；
函数拖动（d）{
var x=d3.event.x；
变量y=d3.event.y；
d3.选择（本）
.选择（“.label1”）
.attr（“x”，函数（d）{返回d.x=x；}）
.attr（“y”，函数（d）{返回d.y=y；}）
d3.选择（本）
.选择（“.label2”）
.attr（“x”，函数（d）{返回d.x2=x；}）
.attr（“y”，函数（d）{返回d.y2=y+20；}）
}

文本{
文本锚定：中间；
光标：指针；
}

非常感谢您！我刚刚将class属性添加到组中。我需要将它拖到一起，因为实际上这两个元素都位于svg组的一个矩形内。真的很感激！非常感谢你！我刚刚将class属性添加到组中。我需要将它拖到一起，因为实际上这两个元素都位于svg组的一个矩形内。真的很感激！