使用d3获取此id属性

Question

jsFiddle Here

lineID = d3.select(this.firstChild).attr('id'); // setting the line id
textID = d3.select(this.lastChild).attr('id'); // setting the text id

在这种情况下，我希望线在拖动时随标签移动 因此，只更新该行的x2和y2属性，并且这些行的x1和y1应保持不变。
这里的firstChild和lastChild用法可能不是理想的解决方案。 x1和y1现在是硬编码的，我不知道如何动态返回值。

Answer 1

在.text选项中调用您的拖动，如this example，而不是svg根元素。

g.selectAll(".text")
    ...
    .call(drag);

然后，访问ID：

var textID = this.id; // this = current text element
var lineID = 'line' + textID.slice(-1); // your custom line id

修改

另外，如果您希望保留x1和y1，则可以在更新行为中省略它们：

d3.select("#"+ lineID)
    .attr("x2", newx2)
    .attr("y2", newy2);

因此.text不会跳转，只需在任何地方使用transform而不设置x和y偏移（默认情况下它们会为0） ）。

g.selectAll(".text")
    ... // no .attr('x', ...) or y here
    .attr("transform", function(d) {
        return "translate(" + (d.x + 10) + "," + (d.y - 30) + ")";
    })
    ...;

这里是DEMO。