バブルチャートのノードにラベルを付ける

私はd3 jsを初めて使用しています。私は力のシミュレーションの助けを借りてバブルチャートを作成しようとしていました。しかし、私は泡を作りましたが、泡にlablesを表示することはできません。以下は私のコードですが、このコードの提案は私にとって大きな助けになります。バブルチャートのノードにラベルを付ける

事前に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

申し訳ありません。私はあなたを取得しませんでした。各ノードにはすでにラベル（キー値）があります。マウスオーバーで表示される予定のデータは何でしょうか？そしてどうやって？ツールチップとして？ – Gilsha

はい、ツールチップです。 – Harshita

バブルチャートのノードにラベルを付ける

答えて

関連する問題