D3.js D3向节点SVG添加文本
我正在尝试使用下面的代码添加标签，但仍然没有成功，我的标签似乎写在页面的顶部，而不是节点本身。我认为这是SVG的一个绑定问题 我试图添加标题，但没有显示出来D3.js D3向节点SVG添加文本,d3.js,svg,D3.js,Svg,我正在尝试使用下面的代码添加标签，但仍然没有成功，我的标签似乎写在页面的顶部，而不是节点本身。我认为这是SVG的一个绑定问题 我试图添加标题，但没有显示出来 <!-- INITAL SETTINGS -------------------------------------------------------------------------------> <!----------------------------------------------------------
<!-- INITAL SETTINGS ------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.5;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.2px;
}
</style>
<!-- the SVG viewport will be 1100px by 900px -->
<svg width="1100" height="900" viewbox="0 0 1100 900">
<text> </text>
<!-- SVG content drawn onto the SVG canvas -->
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// DATA DEFINITIONS NODES & LINKS ------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------
var graph = {
"nodes": [
{ "id": "xxx1", "group": 3 },
{ "id": "xxx2", "group": 1 },
{ "id": "xxx3", "group": 1 }
],
"links": [
{ "source": "xxx1", "target": "xxx2", "value": 42 },
{ "source": "xxx2", "target": "xxx3", "value": 6 },
{ "source": "xxx1", "target": "xxx3", "value": 13 }
]
};
// ---------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------
// D3 CODE
// ---------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------
// create the construct/canvas for drawing
var svg = d3.select("svg")
//set width/height
width = +svg.attr("width"),
height = +svg.attr("height")
preserveAspectRatio = "xMinYMin meet"
//color definition
var color = d3.scaleOrdinal(d3.schemeCategory20);
//Creates a new simulation with the specified array of nodes
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width/2.3, height/2.3))
// adding links
//The g element is a container element for grouping related graphics together
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function (d) { return Math.sqrt(d.value); });
//adding nodes
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 6)
.attr("fill", function (d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
//var text = svg.append("g")
// .attr("class", "text")
// .selectAll("circle")
// .data(graph.nodes)
// .enter().append("id")
// .attr("cx", "12")
// .attr("cy", ".35em")
// .attr("text-anchor", "middle")
// .text(function(d) { return d.id });
// adding title
node.append("title")
.text(function (d) { return (d.id); });
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
// ticked functionality
function ticked() {
link
.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; });
node
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.call(force.drag);
}
//The data and the circle element’s position are updated during the drag event
// when dragged
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
// when dragged completed
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
// when dragged ended
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
.连接线{
行程：#999；
笔划不透明度：0.5；
}
.节点圆{
冲程：#fff；
笔画宽度：1.2px；
}
//数据定义节点和链接------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------
变量图={
“节点”：[
{“id”：“xxx1”，“group”：3}，
{“id”：“xxx2”，“组”：1}，
{“id”：“xxx3”，“组”：1}
],
“链接”：[
{“源”：“xxx1”，“目标”：“xxx2”，“值”：42}，
{“源”：“xxx2”，“目标”：“xxx3”，“值”：6}，
{“源”：“xxx1”，“目标”：“xxx3”，“值”：13}
]
};
// ---------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------
//D3代码
// ---------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------
//为绘图创建构造/画布
var svg=d3.选择（“svg”）
//设置宽度/高度
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）
preserveSpectratio=“xMinYMin-meet”
//颜色定义
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
//使用指定的节点阵列创建新的模拟
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2.3，高度/2.3））
//添加链接
//g元素是一个容器元素，用于将相关图形分组在一起
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
//添加节点
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，6）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
//var text=svg.append（“g”）
//.attr（“类”、“文本”）
//.selectAll（“圆圈”）
//.数据（图.节点）
//.enter（）.append（“id”）
//.attr（“cx”、“12”）
//.attr（“cy”，“.35em”）
//.attr（“文本锚定”、“中间”）
//.text（函数（d）{return d.id}）；
//添加标题
node.append（“标题”）
.text（函数（d）{return（d.id）；}）；
var text=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（图.节点）
.enter（）.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.id}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
//勾选功能
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.呼叫（强制拖动）；
}
//数据和圆元素的位置在拖动事件期间更新
//拖拽
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
//当拖动完成时
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
//拖拽结束时
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
勾选功能中移动文本：
text.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
});
以下是更改后的代码：
var图={
“节点”：[{
“id”：“xxx1”，
“集团”：3
}, {
“id”：“xxx2”，
“集团”：1
}, {
“id”：“xxx3”，
“集团”：1
}
],
“链接”：[{
“来源”：“xxx1”，
“目标”：“xxx2”，
“价值”：42
}, {
“来源”：“xxx2”，
“目标”：“xxx3”，
“价值”：6
}, {
“来源”：“xxx1”，
“目标”：“xxx3”，
“价值”：13
}]
};
//为绘图创建构造/画布
var svg=d3.选择（“svg”）
//设置宽度/高度
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）
preserveSpectratio=“xMinYMin-meet”
//颜色定义
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
//使用指定的节点阵列创建新的模拟
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2.3，高度/2.3））
//添加链接
//g元素是一个容器元素，用于将相关图形分组在一起
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{
返回Math.sqrt（d.value）；
});
//添加节点
var node=svg.append（“g”）
.attr（“类”，