D3v4：强制有向图中的圆圈中缺少文本

Question

我正在使用d3进行简单的可视化绘制力导向图。我从https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048的代码开发，我还添加了一个标记。但是，我正努力在每个节点下绘制文本。代码如下：

var nodes_url = "https://api.myjson.com/bins/1dedy1";
var edges_url = "https://api.myjson.com/bins/74lzt";
var marker = d3.select("svg").append('defs')
 .append('marker')
 .attr("id", "Triangle")
 .attr("refX", 12)
 .attr("refY", 6)
 .attr("markerUnits", 'userSpaceOnUse')
 .attr("markerWidth", 12)
 .attr("markerHeight", 18)
 .attr("orient", 'auto')
 .append('path')
 .attr("d", 'M 0 0 12 6 0 12 3 6');

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

queue()
 .defer(d3.json, nodes_url)
 .defer(d3.json, edges_url)
 .await(function(error, file1, file2) {createForceLayout(file1, file2);   
});

function createForceLayout (nodes, links) {

 var link = svg.append("g")
 .attr("class", "links")
 .selectAll("line")
 .data(links)
 .enter().append("line")
 .style("stroke", "black")
 .style("opacity", .5)
 .style("stroke-width", "2px");

var node = svg.append("g")
 .attr("class", "nodes")
 .selectAll("circle")
 .data(nodes)
 .enter()
 .append("g")
 .attr("class", "node")
 .append("circle")
 .attr("r", 5)
 .style("fill", "lightgray")
 .style("stroke", "black")
 .style("stroke-width", "1px")
 .call(d3.drag()
 .on("start", dragstarted)
 .on("drag", dragged)
 .on("end", dragended));

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

node.append("text")
 .style("text-anchor", "middle")
 .attr("y", 15)
 .text(function(d) {return d.id});

d3.selectAll("line").attr("marker-end", "url(#Triangle)");

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

 simulation.force("link")
   .links(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;
}

输出返回文本，但不显示。关于我能做错什么的任何想法？

非常感谢！

Answer 1

现在，$(window).load(function(){ $('#94785').each(function() { if ($(this).attr('aria-hidden') == 'false') { console.log('checked'); } else { console.log('notchecked'); } }); }); 是＆＃34;输入＆＃34;选择圈子，不能将文字附加到圈子。

解决方案：中断node选项，并相应更改node功能：

ticked

以下是演示：

＆＃13;

＆＃13;

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("gregorMendel")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

var circles = node.append("circle")
    .attr("r", 5)
    .style("fill", "lightgray")
    .style("stroke", "black")
    .style("stroke-width", "1px")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

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

var text = node.append("text")
    .style("text-anchor", "middle")
    .attr("y", 15)
    .text(function(d) {
        return d.id
    });

＆＃13;

var nodes_url = "https://api.myjson.com/bins/1dedy1";
var edges_url = "https://api.myjson.com/bins/74lzt";
var marker = d3.select("svg").append('defs')
  .append('marker')
  .attr("id", "Triangle")
  .attr("refX", 12)
  .attr("refY", 6)
  .attr("markerUnits", 'userSpaceOnUse')
  .attr("markerWidth", 12)
  .attr("markerHeight", 18)
  .attr("orient", 'auto')
  .append('path')
  .attr("d", 'M 0 0 12 6 0 12 3 6');

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.queue()
  .defer(d3.json, nodes_url)
  .defer(d3.json, edges_url)
  .await(function(error, file1, file2) {
    createForceLayout(file1, file2);
  });

function createForceLayout(nodes, links) {

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .style("stroke", "black")
    .style("opacity", .5)
    .style("stroke-width", "2px");

  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("gregorMendel")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

  var circles = node.append("circle")
    .attr("r", 5)
    .style("fill", "lightgray")
    .style("stroke", "black")
    .style("stroke-width", "1px")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

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

  var text = node.append("text")
    .style("text-anchor", "middle")
    .attr("y", 15)
    .text(function(d) {
      return d.id
    });

  d3.selectAll("line").attr("marker-end", "url(#Triangle)");

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

  simulation.force("link")
    .links(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("transform", function(d) {
      return "translate(" + d.x + "," + 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;
}

＆＃13;

＆＃13;

＆＃13;