Question

我有以下代码，在我生命中，我无法使文本显示为标签。我尝试了各种字体，颜色并改变了实际位置和相对位置，但是我永远看不到显示的文本。我可能完全错过了这个问题-我以为是css问题，但这也许是我对D3正在做什么的理解。如果您能指出我正确的方向……

<!DOCTYPE html>
<title>Test Co-occurrence</title>
<style>

    .links line {
     stroke: #aaa;
    }


    /* Show the tooltip text when you mouse over the tooltip container */
    .nodes:hover {
      visibility: visible;
      opacity: 1;
    }

    .nodes text {
      stroke: #333;
      font: 12px sans-serif;       
    }



</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js" type='text/javascript' > </script>
<svg id='nodegraph' width="900" height="500"></svg>

<script>

        var prune = {"nodes":[{"name":"Decreased appetite","node_count":15,"id":"Decreased appetite"},{"name":"Drug interaction","node_count":5,"id":"Drug interaction"},{"name":"Feeling jittery","node_count":6,"id":"Feeling jittery"},{"name":"General physical health deterioration","node_count":2,"id":"General physical health deterioration"},{"name":"Irritable bowel syndrome","node_count":1,"id":"Irritable bowel syndrome"},{"name":"Muscle spasms","node_count":6,"id":"Muscle spasms"},{"name":"Musculoskeletal disorder","node_count":1,"id":"Musculoskeletal disorder"},{"name":"Rebound effect","node_count":1,"id":"Rebound effect"},{"name":"Somnolence","node_count":12,"id":"Somnolence"},{"name":"Syncope","node_count":3,"id":"Syncope"},{"name":"Peripheral vascular disorder","node_count":1,"id":"Peripheral vascular disorder"}],"links":[{"source":"General physical health deterioration","target":"Irritable bowel syndrome","weight":0.1111},{"source":"Drug interaction","target":"Muscle spasms","weight":0.1},{"source":"General physical health deterioration","target":"Muscle spasms","weight":0.1111},{"source":"Irritable bowel syndrome","target":"Muscle spasms","weight":0.1111},{"source":"General physical health deterioration","target":"Musculoskeletal disorder","weight":0.1111},{"source":"Irritable bowel syndrome","target":"Musculoskeletal disorder","weight":0.1111},{"source":"Muscle spasms","target":"Musculoskeletal disorder","weight":0.1111},{"source":"Decreased appetite","target":"Rebound effect","weight":0.1667},{"source":"Decreased appetite","target":"Somnolence","weight":0.3667},{"source":"Drug interaction","target":"Somnolence","weight":0.0769},{"source":"Feeling jittery","target":"Somnolence","weight":0.1667},{"source":"Rebound effect","target":"Somnolence","weight":0.1667},{"source":"General physical health deterioration","target":"Syncope","weight":0.1111},{"source":"Irritable bowel syndrome","target":"Syncope","weight":0.1111},{"source":"Muscle spasms","target":"Syncope","weight":0.1111},{"source":"Musculoskeletal disorder","target":"Syncope","weight":0.1111},{"source":"Muscle spasms","target":"Peripheral vascular disorder","weight":0.5}],"attributes":{}};

function networkGraph(location, g, rf, strength, dMax, dMin, w, labels){

  var svg = d3.select(location),
      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()
                         .strength(strength)
                         .distanceMax(dMax)
                         .distanceMin(dMin)
             )
      .force("center", d3.forceCenter(width / 2, height / 2))
      ;

  var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(g.links)
        .enter().append("line")
        .attr("stroke-width", function(d) { return w === 'Y' ? d.weight*5:1; });

  var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(g.nodes)
        .enter().append("circle")
        .attr("r", function(d) { return rf === 99 ? d.node_count:rf })
        .attr("fill", function(d) { return color(d.dummy); })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));


  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

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

  simulation
        .nodes(g.nodes)
        .on("tick", ticked);

  simulation.force("link")
        .links(g.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 = Math.max(rf, Math.min(width - rf, d.x)); })
           .attr("cy", function(d) { return d.y = Math.max(rf, Math.min(height - rf, 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;
  }

}

networkGraph("#nodegraph", prune, 5, -300, 200, 255, 'Y', 'Y');

</script>

无法显示带有D3强制布局的文本标签

0 个答案: