Javascript 向D3网络添加标签

我是D3新手，正在玩D3网络图。我可以成功地创建网络图并使其可拖动，但无法向节点添加标签。我搜索了答案，我认为我的代码应该可以工作。这是代码

注意：网络布局在此处未正确呈现（但可以拖动节点以查看正确的布局），但在整个网页上运行时，网络布局呈现正确（无标签）

请指出我哪里做错了

非常感谢

亚历克斯

var数据={
“名称”：“A1”，
“儿童”：[{
“名称”：“B1”，
“儿童”：[{
“名称”：“C1”，
“价值”：100
},
{
“名称”：“C2”，
“价值”：300
},
{
“名称”：“C3”，
“价值”：200
}
]
},
{
“名称”：“B2”，
“价值”：200
}
]
};
var root=d3.层次结构（数据）；
函数（d）{
d、 x=d3.event.x，d.y=d3.event.y；
d3.选择（this）.attr（“cx”，d.x.）.attr（“cy”，d.y）；
链接过滤器（功能（l）{
返回l.source==d；
}).attr（“x1”，d.x.）.attr（“y1”，d.y”）；
链接过滤器（功能（l）{
返回l.target==d；
})。attr（“x2”，d.x.）。attr（“y2”，d.y）；
}
//节点
var node=d3.选择（“#网络g.nodes”）
.selectAll（'circle.node'））
.data（根目录下的子目录（））
.输入（）
.append（'圆'）
.classed（'node'，true）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
})
.attr（'r'，4）
.每个功能（d）{
控制台日志（d）；
d3.选择（本）
.append（'文本'）
.文本（d.数据.名称）；
})
.call（d3.drag（）.on（“拖动”，拖动））；
//链接
var link=d3.选择（“#网络g.links”）
.selectAll（'line.link'）
.data（root.links（））
.输入（）
.append（'行'）
.classed（'link'，true）
.attr（'x1'，函数（d）{
返回d.source.x；
})
.attr（'y1'，函数（d）{
返回d.source.y；
})
.attr（'x2'，函数（d）{
返回d.target.x；
})
.attr（'y2'，函数（d）{
返回d.target.y；
});
/* 
node.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（功能（d）{
控制台日志（d）；
返回d.data.name；
});
*/

圆圈{
光标：指针；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：1px；
}
svg文本{
颜色：#000；
光标：指针；
}

---

以下是@AndrewReid建议的示例。

文本

和

圆圈

分组在和

元素中。函数

拖动

更新组的

变换

属性

var数据={
“名称”：“A1”，
“儿童”：[
{
“名称”：“B1”，
“儿童”：[
{
“名称”：“C1”，
“价值”：100
},
{
“名称”：“C2”，
“价值”：300
},
{
“名称”：“C3”，
“价值”：200
}
]
},
{
“名称”：“B2”，
“价值”：200
}
]
};
var root=d3.层次结构（数据）；
函数（d）{
//获取相对于svg的坐标
[d.x，d.y]=d3.mouse（this.parentNode.parentNode）；
d3.select（this.parentNode）.attr（“transform”，“translate”（“+d.x+”，“+d.y+”）”）；
链接过滤器（功能（l）{
返回l.source==d；
}).attr（“x1”，d.x.）.attr（“y1”，d.y”）；
链接过滤器（功能（l）{
返回l.target==d；
})。attr（“x2”，d.x.）。attr（“y2”，d.y）；
}
//节点
var nodeg=d3.选择（“#网络g.nodes”）
.selectAll（'circle.node'））
.data（根目录下的子目录（））
.输入（）
.append（'g'）；
nodeg.append（'circle'））
.classed（'node'，true）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
})
.attr（'r'，4）
.每个功能（d）{
d3.选择（本）
.append（'文本'）
.文本（d.数据.名称）；
})
.call（d3.drag（）.on（“拖动”，拖动））；
//链接
var link=d3.选择（“#网络g.links”）
.selectAll（'line.link'）
.data（root.links（））
.输入（）
.append（'行'）
.classed（'link'，true）
.attr（'x1'，函数（d）{
返回d.source.x；
})
.attr（'y1'，函数（d）{
返回d.source.y；
})
.attr（'x2'，函数（d）{
返回d.target.x；
})
.attr（'y2'，函数（d）{
返回d.target.y；
});
var text=nodeg.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.文本（功能（d）{
//控制台日志（d）；
返回d.data.name；
});
圆圈{
光标：指针；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：1px；
}
svg文本{
颜色：#000；
光标：指针；
}
在@AndrewReid的评论之后，我对代码进行了如下修改，效果很好。基本上，我需要打破链接，以便不同的元素附加到适当的父元素

var node = d3.select('#network g.nodes')
  .selectAll('circle.node')
  .data(root.descendants())
  .enter()
  .append('g');

var circle = node.append('circle')
.classed('node', true)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
.attr('r', 6)
.call(d3.drag().on("drag", dragged))
;


// Links
var link = d3.select('#network g.links')
.selectAll('line.link')
.data(root.links())
.enter()
.append('line')
.classed('link', true)
.attr('x1', function(d) {return d.source.x;})
.attr('y1', function(d) {return d.source.y;})
.attr('x2', function(d) {return d.target.x;})
.attr('y2', function(d) {return d.target.y;});


var text= node.append("text")
.attr('x', function(d) {return d.x;})
.attr('y', function(d) {return d.y;})
.attr("dx", 12)
.attr("dy", ".25em")
.text(function(d) {   
    return d.data.name;
});

function dragged(d) {
    d.x = d3.event.x, d.y = d3.event.y;
    d3.select(this).attr("cx", d.x).attr("cy", d.y);
    text
     .attr('x', function(d) {return d.x;})
     .attr('y', function(d) {return d.y;})
    link.filter(function(l) {return l.source === d; }).attr("x1", 
      d.x).attr("y1", d.y);
    link.filter(function(l) { return l.target === d; }).attr("x2", 
      d.x).attr("y2", d.y);
}

您正在将文本附加到圆中，这将不起作用。您需要将文本附加到其他父级，如中或中。这些需要定位文本并圈出每个记号，我更喜欢为每个节点输入一个
g
，定位每个记号，并在
g
中添加一个圆圈和文本，如中所示。@Andrewerid非常感谢您的回复。我现在明白了！现在我需要使文本标签与标签一起拖动。以后可能需要帮助：）谢谢你的回复。我将尝试这段代码，并与我提出的代码进行比较。很高兴知道实现同样目标的其他方法。