d3节点标记

问题描述：

我一直在使用this d3 project的示例代码来学习如何显示d3图形，我似乎无法让文本显示在圆圈中间（类似于this example和this example）。我看其他的例子，并尝试添加d3节点标记

node.append("title").text("Node Name To Display")

和

node.append("text") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".3em").text("Node Name To Display")

节点被定义之后，但唯一的结果我看到的是“节点名称，显示”被显示出来，当我徘徊在每个节点上。它没有显示为圈内的文字。我是否必须编写自己的svg文本对象，并根据圆的半径坐标确定需要放置的坐标？从另外两个例子来看，似乎D3已经在某种程度上关注了这一点。我只是不知道调用/设置的正确属性。

答

有lots of examples展示如何添加标签，图表和树的可视化，但我可能会用这个作为一个最简单的开始：

http://bl.ocks.org/950642

您还没有贴链接到您的代码，但我猜node是指一个SVG圈元素的选择。您不能将文本元素添加到圆形元素，因为圆形元素不是containers;将一个文本元素添加到圆圈将被忽略。

通常，您使用G元素为每个节点分组一个圆形元素（或图像元素，如上）和文本元素。所得到的结构是这样的：

<g class="node" transform="translate(130,492)"> 
    <circle r="4.5"/> 
    <text dx="12" dy=".35em">Gavroche</text> 
</g>

使用data-join来为每个节点创建对于g的元素，然后使用selection.append添加圆圈和每个文本元素。像这样的：

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

node.append("circle") 
    .attr("r", 4.5); 

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

这种方法的一个缺点是，你可能希望标签绘制在圆的顶部。由于SVG还不支持z-index，因此元素按文档顺序绘制;所以，上述方法导致标签在其圆圈上方被绘制为，但是可以在其他圆圈下绘制。您可以通过使用修复这个两个数据连接和创造界和标签不同的组，就像这样：

<g class="nodes"> <circle transform="translate(130,492)" r="4.5"/> <circle transform="translate(110,249)" r="4.5"/> … </g> <g class="labels"> <text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text> <text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text> … </g>

和相应的JavaScript：

var circle = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", 4.5) .call(force.drag); var text = svg.append("g") .attr("class", "labels") .selectAll("text") .data(nodes) .enter().append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name });

这种技术在Mobile Patent Suits示例中使用（与用于创建白色阴影的附加文本元素）。

答

我发现本指南中试图完成类似的东西非常有用：

https://www.dashingd3js.com/svg-text-element

基于以上链接这段代码生成圈子标签：如果你想成长的

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
<body style="overflow: hidden;"> 
<div id="canvas" style="overflow: hidden;"></div> 

<script type="text/javascript"> 

    var graph = { 
     "nodes": [ 
      {name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"}, 
      {name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"}, 
      {name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"} 
     ] 
    } 

    $(document).ready(function() { 

     var width = 2000; 
     var height = 2000; 

     var svg = d3.select("#canvas").append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g"); 

     var lines = svg.attr("class", "line") 
       .selectAll("line").data(graph.nodes) 
       .enter().append("line") 
       .style("stroke", "gray") // <<<<< Add a color 
       .attr("x1", function (d, i) { 
        return d.x 
       }) 
       .attr("y1", function (d) { 
        return d.y 
       }) 
       .attr("x2", function (d) { 
        return findAttribute(d.connected).x 
       }) 
       .attr("y2", function (d) { 
        return findAttribute(d.connected).y 
       }) 

     var circles = svg.selectAll("circle") 
       .data(graph.nodes) 
       .enter().append("circle") 
       .style("stroke", "gray") 
       .style("fill", "white") 
       .attr("r", function (d, i) { 
        return d.r 
       }) 
       .attr("cx", function (d, i) { 
        return d.x 
       }) 
       .attr("cy", function (d, i) { 
        return d.y 
       }); 

     var text = svg.selectAll("text") 
           .data(graph.nodes) 
           .enter() 
           .append("text"); 

     var textLabels = text 
      .attr("x", function(d) { return d.x; }) 
      .attr("y", function(d) { return d.y; }) 
      .text(function (d) { return d.name }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "10px") 
      .attr("fill", "red"); 

    }); 

    function findAttribute(name) { 
     for (var i = 0, len = graph.nodes.length; i < len; i++) { 
      if (graph.nodes[i].name === name) 
       return graph.nodes[i]; // Return as soon as the object is found 
     } 
     return null; // The object was not found 
    } 


</script> 
</body> 
</html>

尽管此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – Whymarrh

@Whymarrh答案已更新 –

答

节点以适应大型标签，您可以在绘制SVG文本节点后使用getBBox属性。以下是我做的，对节点的固定坐标列表，以及两个可能的形状：

nodes.forEach(function(v) { 
    var nd; 
    var cx = v.coord[0]; 
    var cy = v.coord[1]; 

    switch (v.shape) { 
    case "circle": 
     nd = svg.append("circle"); 
     break; 
    case "rectangle": 
     nd = svg.append("rect"); 
     break; 
    } 

    var w = 10; 
    var h = 10; 
    if (v.label != "") { 
    var lText = svg.append("text"); 

    lText.attr("x", cx) 
     .attr("y", cy + 5) 
     .attr("class", "labelText") 
     .text(v.label); 

    var bbox = lText.node().getBBox(); 
    w = Math.max(w,bbox.width); 
    h = Math.max(h,bbox.height); 
    } 

    var pad = 4; 

    switch (v.shape) { 
    case "circle": 
     nd.attr("cx", cx) 
     .attr("cy", cy) 
     .attr("r", Math.sqrt(w*w + h*h)/2 + pad); 
     break; 
    case "rectangle": 
     nd.attr("x", cx - w/2 - pad) 
     .attr("y", cy - h/2 - pad) 
     .attr("width", w + 2*pad) 
     .attr("height", h + 2*pad); 
     break; 
    } 

});

注意，形状添加，文字添加，然后形状定位，以让文字显示在最上面。

相关推荐