标签不会出现在d3力图上 [英] labels wont show up on d3 force diagram

问题描述

我是d3的初学者。我发现其中一个图特别有用和有趣的是d3力图。我一直在玩它，但由于某种原因，我有很多麻烦这个特定的数据集。具体来说，我一直在试图让标签显示在我的d3力图，但它只是不会工作。这是我的代码：

 <！DOCTYPE html> 
< meta charset =utf-8> 
< style> 
 .links行{
 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 =960height =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 line）
 .attr（stroke-width，function（d）{return 1}）; 
 
 var node = svg.append（g）
。 attr（class，nodes）
 .selectAll（circle）
 .data（graph.nodes）
 .enter b .attr（r，function（d）{
 return 3 * d.size; 
}）
 .attr（fill，function（d）{return color（d .id）;}）
 .call（d3.drag（）
 .on（start，dragstarted）
 .on（drag，拖动）
 .on （end，dragended））; 
 
 node.append（svg：title）
 .attr（dx，12）
。 ，.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 dx;}）
 .attr（cy，function（d）{return dy;} ）; 
} 
}）; 
 
 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>非常感谢您的帮助
 
  $ b  
 
 



<编辑：这里是我的links.json

  {
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}，ABC，target：CO，value：A 
 {source：ABC，target：CO，value：A}，
 {source：ABC ，value：A} 
} 
  




解决方案

添加了以下修改：


  var svg = d3.select（svg）， width = + svg.attr（width），height = + svg.attr（height）; var color = d3.scaleOrdinal（d3.schemeCategory20）; var simulation = d3.forceSimulation ，d3.forceLink（）。id（function（d）{return d.id; }））.force（charge，d3.forceManyBody（））.force（center，d3.forceCenter（width / 2，height / 2））; graph = {nodes：[{id： AK，size：1.414213562}，{id：AL，size：1.414213562}，{id：AR id：AZ，size：2.828427125}]，links：[{source：AK，target：AL，value：A}， source：AL，target：AZ，value：A}，{source：AL，target：AR，value：A} ，{source：AZ，target：AR，value：A}]}; 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 c（d3.drag（）。r，function（d）{return 5;}）.attr（fill，function（d）{return color（d.id）;} ，dragstarted）.on（drag，dragged）.on（end，dragended） node.append（svg：title）.attr（dx，12）.attr（dy，.35em）.text（function（d）{return d.id}）; var labels = svg.append（g）.attr（class，label）.selectAll（text）.data（graph.nodes）.enter dx，6）.attr（dy，.35em）.style（font-size，10）.text（function（d）{return d.id}）;模拟节点（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;}）;节点.attr（cx，function（d）{return d.x;}）.attr（cy，function（d）{return d.y;}）;标签.attr（x，function（d）{return d.x;}）.attr（y，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;}  

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

 < script src =https://d3js.org/d3.v4.min.js>< / script>< svg width =960height =600>< / svg>  

原始回答：

你的json不是正确。首先，没有名为ABC的源或命名为CO或FL的目标。
源和目标值应为节点的id。您不能链接未定义的内容。
此外，您没有使用size和value属性。

  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返回d.id;}））.force（charge，d3.forceManyBody（））.force（center，d3.forceCenter（width / 2，height / 2））; graph = {nodes：[ {id：AK，size：1.414213562}，{id：AL，size：1.414213562}，{id：AR，size： ，target：AL，value： A，target：AR，value：A}，{source： ：A}，{source：AZ，target：AR，value：A}]}; 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 c（d3.drag（）。r，function（d）{return 5;}）.attr（fill，function（d）{return color（d.id）;} ，dragstarted）.on（drag，dragged）.on（end，dragended） node.append（svg：title）.attr（dx，12）.attr（dy，.35em）.text（function（d）{return d.id}）;模拟节点（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;}  

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

 < script src =https://d3js.org/d3.v4.min.js>< / script>< svg width =960height =600>< / svg>  

I am a beginner at d3. One of the diagrams I find particularly helpful and fun is the d3 force diagram. I've been playing around with it, but for some reason I've had a lot of trouble with this particular data set. Specifically, I've been trying forever to get the labels to show up on my d3 force diagram, but it just won't work. Here is my code:

 <!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>

thanks so much for your help

edit: here is my links.json

{
  "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"}
}

解决方案

Added Edit below :

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

graph = {
  "nodes": [
  {"id": "AK","size": "1.414213562"},
  {"id": "AL","size": "1.414213562"},
  {"id": "AR","size": "1.414213562"},
  {"id": "AZ","size": "2.828427125"}],
"links": [
  {"source": "AK","target": "AL","value": "A"},
  {"source": "AL","target": "AZ","value": "A"},
  {"source": "AL","target": "AR","value": "A"},
  {"source": "AZ","target": "AR","value": "A"}]
};
  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 5;
      })
      .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 });
	
	var labels = svg.append("g")
      .attr("class", "label")
    .selectAll("text")
    .data(graph.nodes)
    .enter().append("text")
      .attr("dx", 6)
      .attr("dy", ".35em")
	   .style("font-size",10)
      .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; });
	  
	labels
        .attr("x", function(d) { return d.x; })
        .attr("y", 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;
}

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>	

Original answer :

Your json is not "proper". First of all there is no source named ABC or targets named CO or FL. Source and target values should be an id from the nodes. You cannot link something that is not defined. Also you are not using the size and value attribute.

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

graph = {
  "nodes": [
  {"id": "AK","size": "1.414213562"},
  {"id": "AL","size": "1.414213562"},
  {"id": "AR","size": "1.414213562"},
  {"id": "AZ","size": "2.828427125"}],
"links": [
  {"source": "AK","target": "AL","value": "A"},
  {"source": "AL","target": "AZ","value": "A"},
  {"source": "AL","target": "AR","value": "A"},
  {"source": "AZ","target": "AR","value": "A"}]
};
  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 5;
      })
      .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;
}

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>

这篇关于标签不会出现在d3力图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！