stackoom
  简体   繁体   中英

D3.js - Text not showing up in node

 原文  2018-04-27 06:58:47  7   1    javascript/ d3.js/ svg

Question

I found this d3 code, and I am unable to put text to the nodes. I have seen some solutions to create a parent class for this but I am getting errors trying them out. The current code works but doesn't add text :(

Here's the plnkr link for the working code -

http://plnkr.co/edit/dqAaEhJnnK4i2nBsTaNu?p=preview

Also, this is the code 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<button id="clusterButton" type="button">Cluster</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="../netClustering.js">   </script>
<!-- <script type="text/javascript" src="groupInABox.js">   </script> -->
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);


// var gb = GroupInABox(force, "");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);



d3.json("miserables.json", function(error, graph) {


  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .call(force.drag);

//  node.append("title")
//      .text(function(d) { return d.name; });

  node.append("text")
      .attr("dx", 12)
      .attr("dy", "0.35em")
      .text(function(d){ return d.name; });
//      .call(force.drag);
//      .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })


  force.on("tick", function() {
    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; });
  });

  d3.select("#clusterButton").on("click", function () {
    netClustering.cluster(graph.nodes, graph.links);

    svg.selectAll(".node").transition().duration(500).style("fill", function(d) { return color(d.cluster); });
  });
});

</script>

1 answers

solution1
 2 ACCPTED  2018-04-27 07:38:38

You are appending a text to circle as child node. That will not render. A circle can't have a text. There are 2 ways, either define a new enter selection with the same data and append texts ,or create ag element append circle and text and on tick,vupdate transform attribute each tick. I did the first one, change the below part of your script and it will render: 

//  node.append("title")
//      .text(function(d) { return d.name; });
  var texts  =svg.selectAll(".texts")
      .data(graph.nodes)
      .enter()
      .append("text")
      .attr("dx", 12)
      .attr("dy", "0.35em")
      .text(function(d){ return d.name; });
//      .call(force.drag);
//      .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })


  force.on("tick", function() {
    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; });

    texts.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
  });

You entire html: 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<button id="clusterButton" type="button">Cluster</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="netClustering.js">   </script>
<!-- <script type="text/javascript" src="groupInABox.js">   </script> -->
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);


// var gb = GroupInABox(force, "");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);



d3.json("miserables.json", function(error, graph) {


  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .call(force.drag);

 var texts  =svg.selectAll(".texts")
      .data(graph.nodes)
      .enter()
      .append("text")
      .attr("dx", 12)
      .attr("dy", "0.35em")
      .text(function(d){ return d.name; });
//      .call(force.drag);
//      .attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })


  force.on("tick", function() {
    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; });

    texts.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
  });

  d3.select("#clusterButton").on("click", function () {
    netClustering.cluster(graph.nodes, graph.links);

    svg.selectAll(".node").transition().duration(500).style("fill", function(d) { return color(d.cluster); });
  });
});

</script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Tooltip not showing up d3.js D3.js violin plot not showing up Geojson file not showing up in D3.js D3.js Bars not showing up Tweening text in d3.js - count up D3.js graph shows up as text Argentina not showing up on world map with d3.js d3.js forcelayout not showing up with data from python on flask Summing up the weight of all edges to a node in D3.js? Adding “triangle-up” in d3.js node
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM