Làm cách nào để thêm nhãn vào biểu đồ bong bóng lực d3.js

Question

Tôi đang cố sửa đổi mã này bl.ocks.org/mbostock/7881887 để tôi có thể sử dụng kỹ thuật để hiển thị đám mây từ có kích thước vòng tròn liên quan đến không có từ nào trong một tệp nhưng vấn đề chính của tôi hiện tại là tìm ra cách thêm văn bản vào vòng kết nối ở vị trí đầu tiên. Tantalizingly tôi có thể nhìn thấy những gì trông giống như một chức năng thực hiện điều này trong mã ... node.append ("văn bản")? Vì vậy, tôi giả định tôi sẽ có thể thêm một "tên" giá trị để "d" trong các chức năng nút và đi chúng tôi muốn đi. Như bạn có thể thấy tôi vừa thêm tên: văn bản nơi text = "Test" thành d. Bất kỳ trợ giúp nào nhận được bất kỳ văn bản nào xuất hiện trong hoặc gần các vòng kết nối này sẽ được đánh giá rất nhiều! Tôi mới D3 như bạn có thể có thể nói và đã dành nhiều buổi tối googling này để tìm thấy gì cả. Tôi có thể xem các ví dụ về một loại khác nhau của biểu đồ ... lực lượng bố trí ví dụ http://bl.ocks.org/mbostock/1093130 nhưng chúng xuất hiện quá khác biệt Tôi không thể áp dụng một đến :-(khác

đây là jsfiddle tôi https://jsfiddle.net/TimBrighton/vn7reroe/1/

var width = 960, 
    height = 500, 
    padding = 1.5, // separation between same-color nodes 
    clusterPadding = 6, // separation between different-color nodes 
    maxRadius = 12; 

var n = 100, // total number of nodes 
    m = 5; // number of distinct clusters 

var color = d3.scale.category10() 
    .domain(d3.range(m)); 

// The largest node for each cluster. 
var clusters = new Array(m); 

var nodes = d3.range(n).map(function() { 
    test="Test"; 
    var i = Math.floor(Math.random() * m), 
     r = Math.sqrt((i + 1)/m * -Math.log(Math.random())) * maxRadius,  
     d = { 
     name: test, 
     cluster: i, 
     radius: r, 
     name: "test", 
     x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
     y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
     }; 
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; 
    console.log(d.name); 
    return d; 

}); 

var force = d3.layout.force() 
    .nodes(nodes) 
    .size([width, height]) 
    .gravity(.02) 
    .charge(0) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var node = svg.selectAll("circle") 
    .data(nodes) 
    .enter().append("circle") 
    .style("fill", function(d) { return color(d.cluster); }) 
    .call(force.drag); 


node.append("text") 
.text(function(d) { return d.name; }) 
    // .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8)/this.getComputedTextLength() * 24) + "px"; }) 
    //.attr("dy", ".35em"); 

    .attr("dx", 10) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name }) 
    .style("stroke", "gray"); 

node.transition() 
    .duration(750) 
    .delay(function(d, i) { return i * 5; }) 
    .attrTween("r", function(d) { 
     var i = d3.interpolate(0, d.radius); 
     return function(t) { return d.radius = i(t); }; 
    }); 




function tick(e) { 
    node 
     .each(cluster(10 * e.alpha * e.alpha)) 
     .each(collide(.5)) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
} 

// Move d to be adjacent to the cluster node. 
function cluster(alpha) { 
    return function(d) { 
    var cluster = clusters[d.cluster]; 
    if (cluster === d) return; 
    var x = d.x - cluster.x, 
     y = d.y - cluster.y, 
     l = Math.sqrt(x * x + y * y), 
     r = d.radius + cluster.radius; 
    if (l != r) { 
     l = (l - r)/l * alpha; 
     d.x -= x *= l; 
     d.y -= y *= l; 
     cluster.x += x; 
     cluster.y += y; 
    } 
    }; 
} 

// Resolves collisions between d and all other circles. 
function collide(alpha) { 
    var quadtree = d3.geom.quadtree(nodes); 
    return function(d) { 
    var r = d.radius + maxRadius + Math.max(padding, clusterPadding), 
     nx1 = d.x - r, 
     nx2 = d.x + r, 
     ny1 = d.y - r, 
     ny2 = d.y + r; 
    quadtree.visit(function(quad, x1, y1, x2, y2) { 
     if (quad.point && (quad.point !== d)) { 
     var x = d.x - quad.point.x, 
      y = d.y - quad.point.y, 
      l = Math.sqrt(x * x + y * y), 
      r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding); 
     if (l < r) { 
      l = (l - r)/l * alpha; 
      d.x -= x *= l; 
      d.y -= y *= l; 
      quad.point.x += x; 
      quad.point.y += y; 
     } 
     } 
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 
    }); 
    }; 
} 

Answer 1

bạn đang thêm DOM tEXT với trong DOM vòng tròn.

Đó là lý do tại sao bạn không nhìn thấy văn bản.

<circle cx="331.0297405069362" cy="238.4899367858363" style="fill: rgb(255, 127, 14);" r="24.842603758681765"> 
    <text dx="10" dy=".35em" style="stroke: gray;">test</text> 
</circle> 

Đây là inc orrect.

Cách chính xác sẽ làm cho nhóm thêm vòng kết nối và văn bản trong đó. Như thế này:

<g transform="translate(402.3818560847106,240.01473655622326)"> 
    <circle r="31.769893912794977" style="fill: rgb(255, 127, 14);"> </circle> 
    <text dx="-10" dy=".35em" style="stroke: gray;">test</text> 
</g> 

Vì vậy, để làm được điều này đầu tiên bạn thực hiện các nhóm như thế này:

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

Thêm vòng tròn để nhóm:

node.append("circle") 
    .style("fill", function (d) { 
    return color(d.cluster); 
}).attr("r", function(d){return d.radius}) 

Thêm văn bản vào nhóm

//add text to the group  
node.append("text") 
    .text(function (d) { 
    return d.name; 
}) 
.attr("dx", -10) 
    .attr("dy", ".35em") 
    .text(function (d) { 
    return d.name 
}) 
    .style("stroke", "gray"); 

Insid e chức năng đánh dấu thay vì cập nhật cy cx của vòng tròn chúng ta cần phải di chuyển các nhóm đầy đủ để sử dụng biến đổi như thsi:

function tick(e) { 
    node.each(cluster(10 * e.alpha * e.alpha)) 
     .each(collide(.5)) 
    //.attr("transform", functon(d) {}); 
    .attr("transform", function (d) { 
     var k = "translate(" + d.x + "," + d.y + ")"; 
     return k; 
    }) 

} 

đang here làm việc.