D3網絡圖：添加文字

Question

我需要在此D3力導向圖表中添加文本標籤（來自Zoomable Force Directed Graph d3v4 link）。 但是我不明白將標籤添加到圓圈和鏈接所需的編輯。節點標籤爲屬性「node.label」，邊緣標籤爲屬性「edge.label」。 這d3 Node Labeling解釋了需要編輯，但我一直無法得到它的工作（不幸的是，我不是一個JS程序員）。如何編輯此項，以便可以爲節點添加屬性「node.label」，並將「edge.label」屬性添加到邊緣？

//add encompassing group for the zoom 
var g = svg.append("g") 
    .attr("class", "everything"); 

//draw lines for the links 
var link = g.append("g") 
    .attr("class", "links") 
    .selectAll("line") 
    .data(links_data) 
    .enter().append("line") 
    .attr("stroke-width", 2) 
    .style("stroke", linkColour); 

//draw circles for the nodes 
var node = g.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(nodes_data) 
     .enter() 
     .append("circle") 
     .attr("r", radius) 
     .attr("fill", circleColour); 

Answer 1

你可以做的是讓你的節點成爲一個圓圈，然後向它添加一個文本。你也必須改變tickActions功能，因此其移動<克>：

圖紙節點G：

var node = g.append("g") 
     .attr("class", "nodes") 
     .selectAll(".node") 
     .data(nodes_data) 
     .enter() 
     .append("g") 
     .attr("class","node") 
     .each(function(d){ 
      d3.select(this) 
        .append("circle") 
        .attr("r", radius) 
        .attr("fill", circleColour(d)); 
      d3.select(this) 
        .append("text").text(d.name) 
        .attr("dy",radius+10) 
        .style("text-anchor","middle"); 
     }); 

蜱功能：

function tickActions() { 
    //update node positions each tick of the simulation 
    node 
      .attr("transform", function(d) { return "translate("+d.x+","+ d.y+")"; }); 

    //update link positions 
    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; }); 
}