d3 强制布局图形标签和顶点和边上的文本

Question

我正在尝试使用 d3 v4 创建强制有向图。

我能够创建顶点和边，但不能在顶点形状内添加名称/文本。

对于边缘，文本的一半长度应高于行。

以下代码正在添加文本，但位置不正确

node.append("text").
attr("dx", 6).attr("dy", ".35em")
.style("font-size",10).text(function(d) { return d.name });

JSFIDDLE

Answer 1

现在你可以

解释

首先你创建一组节点和链接

1. 节点是组来保持圆圈
2. link 是保持线路连接的组

---

你创建变量节点通过

追加数据

node = node.data(nodes, function(d) { return d.id;});
//var node pointing to group cos still node = g.append("g")

比你更新变量节点来追加圆圈

node = node.enter().append("circle")
//var node pointing to circle on group

如果你通过

node.append("text").
attr("dx", 6).attr("dy", ".35em")
.style("font-size",10).text(function(d) { return d.name });

检查 HTML

它将附加在node>circle>text 上，这是错误的
正确的应该是node>text

所以在节点组上创建文本而不是圆圈

在指向圆的节点变量之前创建变量文本以附加到组上

 uu = node.enter().append("text")

比更新x and y 位置就像你更新cx and cy 的圈子上

function ticked() {//update x and y of uu variable}

var createD3 = function(){
		var svg = d3.select("svg"),
		    width = +svg.attr("width"),
		    height = +svg.attr("height"),
		    color = d3.scaleOrdinal(d3.schemeCategory10);

		    var a = {id: "a",name:"y"},
			    b = {id: "b",name:"x"},
			    c = {id: "c",name:"z"},
			    nodes = [a, b, c],
			    links = [{source: a, target: b},{source: b, target: c},{source: c, target: a}];


		    var simulation = d3.forceSimulation(nodes)
			    .force("charge", d3.forceManyBody().strength(-1000))
			    .force("link", d3.forceLink(links).distance(200))
			    .force("x", d3.forceX())
			    .force("y", d3.forceY())
			    .alphaTarget(1)
			    .on("tick", ticked);



		var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
		    link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
		    node = g.append("g").attr("stroke-width", 1.5).selectAll(".node");

		restart();

		function restart() {

		  // Apply the general update pattern to the nodes.
		  node = node.data(nodes, function(d) { return d.id;});
		  node.exit().remove();
      uu = node.enter().append("text").text(function(d) { return d.name }).attr("fill",'blue').attr('text-anchor','middle').style('font-size',24)
		  node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node);
		  		  
  		//var labels = node

		  // Apply the general update pattern to the links.
		  link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; });
		  link.exit().remove();
		  link = link.enter().append("line").merge(link);

		  // Update and restart the simulation.
		  simulation.nodes(nodes);
		  simulation.force("link").links(links);
		  simulation.alpha(1).restart();
		}

		function ticked() {
		  node.attr("cx", function(d) { return d.x; })
		      .attr("cy", function(d) { return d.y; });

			uu.attr("x", function(d,i) { 
       if(i==0){return d.x-80;}
        if(i==1){return d.x+10;}
         if(i==2){return d.x+80;}

      })
		      .attr("y", function(d,i) { 
          if(i==0){return d.y+40;}
           if(i==1){return d.y-80;}
            if(i==2){return d.y+80;}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<svg width="500" height="500"></svg>