Javascript 标签不会显示在d3力图上_Javascript_D3.js

Javascript 标签不会显示在d3力图上

javascript d3.js

Javascript 标签不会显示在d3力图上,javascript,d3.js,Javascript,D3.js,我是d3的初学者。我发现其中一个特别有用和有趣的图表是d3力图。我一直在玩弄它，但由于某种原因，我在使用这个特定的数据集时遇到了很多麻烦。具体地说，我一直试图让标签显示在我的d3力图上，但它就是不起作用。这是我的密码： <!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle {

我是d3的初学者。我发现其中一个特别有用和有趣的图表是d3力图。我一直在玩弄它，但由于某种原因，我在使用这个特定的数据集时遇到了很多麻烦。具体地说，我一直试图让标签显示在我的d3力图上，但它就是不起作用。这是我的密码：

 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 .links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
.node text {
  pointer-events: none;
  font: 10px sans-serif;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("links.json", function(error, graph) {
  if (error) throw error;
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return 1});

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", function(d){
        return 3*d.size;
      })
      .attr("fill", function(d) { return color(d.id); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

      node.append("svg:title")
      .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);

  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; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
</script>

在下面添加了编辑：

var svg=d3.选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
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，高度/2））；
图={
“节点”：[
{“id”：“AK”，“size”：“1.414213562”}，
{“id”：“AL”，“size”：“1.414213562”}，
{“id”：“AR”，“size”：“1.414213562”}，
{“id”：“AZ”，“size”：“2.828427125}]，
“链接”：[
{“源”：“AK”，“目标”：“AL”，“值”：“A”}，
{“源”：“AL”，“目标”：“AZ”，“值”：“A”}，
{“源”：“AL”，“目标”：“AR”，“值”：“A”}，
{“源”：“AZ”，“目标”：“AR”，“值”：“A”}]
};
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{return 1}）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，函数（d）{
返回5；
})
.attr（“fill”，函数（d）{返回颜色（d.id）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“svg:title”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.id}）；
var labels=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（图.节点）
.enter（）.append（“文本”）
.attr（“dx”，6）
.attr（“dy”，“.35em”）
.style（“字体大小”，10）
.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；}）；
标签
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（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；
}

.links行{
行程：#999；
笔划不透明度：0.6；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}

你能添加你的links.json吗？@Dragon\u Slayer添加了，谢谢你的帮助？它不起作用了。非常感谢！这实际上是我的一个粗心的错误。数据包含一些敏感信息，因此我无法直接复制。但是，在使用虚拟值时，我把问题完全搞砸了。很抱歉。另外，如果不太麻烦您的话，您能告诉我一旦建立了节点和链接，如何添加标签吗？标签是指附加到节点的文本吗？是的！那正是我的意思哇！非常感谢~！要编辑文本，我会在css中创建一个标签类吗？我现在只有一个问题。当我运行您的代码时，我无法像在前面的代码中那样修复大小和颜色。你认为这是为什么？再次感谢你对我的帮助

{
  "nodes": [
  {"id": "AK","size": "1.414213562"},
  {"id": "AL","size": "1.414213562"},
  {"id": "AR","size": "1.414213562"},
  {"id": "AZ","size": "2.828427125"}],
"links": [
  {"source": "ABC","target": "CO","value": "A"},
  {"source": "ABC","target": "CO","value": "A"},
  {"source": "ABC","target": "CO","value": "A"},
  {"source": "ABC","target": "FL","value": "A"}
}