氣泡圖中的標籤節點

我是d3 js的新手，我試圖用力模擬來創建氣泡圖。但是，我已經創建了氣泡，但無法在氣泡上顯示標籤。以下是我的代碼，對此代碼的任何建議對我來說都是很有幫助的。氣泡圖中的標籤節點

Thankss提前

<html> 
<head> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
<body> 
<script> 
var width = 1500; 
var height = 1000; 
var color = d3.scaleOrdinal(d3.schemeCategory10); 

var canvas = d3.select("body") 
     .append("svg") 
     .attr("width",width) 
     .attr("height",height). 
     append("g") 
     .attr("transform","translate(0,0)"); 

var radiusScale = d3.scaleSqrt().domain([0,130000]).range([10,100]) 

var simulation = d3.forceSimulation() 
     .force("x",d3.forceX(width/2).strength(0.05)) 
     .force("y",d3.forceY(height/2).strength(0.05)) 
     .force("collide",d3.forceCollide(function(d){ return radiusScale(d.value)+1;})) 


d3.queue(). 
    defer(d3.csv,"historylogs.csv").await(ready); 

function ready(error,datapoints){ 

console.log(datapoints); 

datapoints = datapoints.map(function(d){ d.value = +d["size_kw"]; return d; }); 

datapoints = d3.nest() 
.key(function(d) { return d.install_type;}) 
.rollup(function(d) { 
    return d3.sum(d, function(g) {return g.value; }); 
    }).entries(datapoints); 

console.log(datapoints); 

var nodes = canvas.selectAll("g") 
    .data(datapoints) 
    .enter() 
.append("g"); 

var circles= nodes                     
     .append("circle") 
     .attr("r",function(d){ return radiusScale(d.value);}) 
     .attr("fill",function(d) { return color(d.value);}) 
     .attr("opacity",0.5) 
     //.attr("dx", function(d){return d.key}) 
      //.text(function(d){return d.key}) 
     //.on('mouseover',function(d){}) 

var text= nodes 
     .append("text") 
     .attr("text-anchor", "middle")  
     .text(function(d){ return d.key; }) 
     .style({ 
      "fill":"black", 
      "font-family":"Helvetica Neue, Helvetica, Arial, san-serif", 
      "font-size": "12px" 
      }); 


    simulation.nodes(datapoints).on('tick',ticked); 

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

來源

2017-04-03 Harshita

正如你已經創建<g>元素分組圓和文本元素，你可以通過簡單的設置的transform屬性更新這兩個元素的位置組元素。所以改變你的滴答功能，如下所示。

function ticked() { 
    nodes.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
    }

來源

2017-04-03 15:12:51 Gilsha

它的工作，你可以告訴如何顯示與每個節點相關的數據，只要我們將鼠標指針放在氣泡上。 – Harshita

對不起Harshita。我沒有得到你。您已經有每個節點的標籤（鍵值）。那麼鼠標懸停上顯示的數據是什麼？如何？作爲一個工具提示？ – Gilsha

是的，作爲工具提示。 – Harshita

氣泡圖中的標籤節點

回答

相關問題