d3 circleにテキストを追加する

Question

この例ではhttp://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7を使用していますが、円にテキストを追加しようとしています。

これは、円が作成される方法であると

var nodes = svg.selectAll("circle") 
     .data(data); 

    nodes.enter().append("circle") 
     .attr("class", function (d, i) { return "circle_"+d.sentiment+" circle_"+i}) 
     .attr("cx", function (d) { return d.x; }) 
     .attr("cy", function (d) { return d.x; }) 
     .attr("r", function (d) { return d.radius; }) 
     .style("fill", function (d, i) { return colors['default']; }) 
     .on("mouseover", function (d) { showPopover.call(this, d); }) 
      .on("mouseout", function (d) { removePopovers(this, true); }) 
      .call(pulse, function(d){ return d.radius+4; }, function(d){return d.radius; }); 

を置いしかし、私はこれらの円にテキストを追加する方法についての手掛かりを得ていないのです。

私はすでにthisとthisと答えていますが、成功できませんでした。問題は、上記の回答に続いて、私の円が対角線に詰まっていることです。

これを行う方法を教えてもらえますか？

Answer 1

別のオプション、@シリルさんに近いですg要素を使用し、円とテキストの両方を内側に配置します。

var nodes = svg.selectAll("g") 
    .data(data); 

var g = nodes.enter().append("g") 

g.append("circle") 
    .attr("class", function(d) { 
    return d.ratingCategory; 
    }) 
    .attr("r", 2) 
    .attr("id", function(d){return d.objectName;}) 
    .on("mouseover", function(d) { 
    showPopover.call(this, d); 
    }) 
    .on("mouseout", function(d) { 
    removePopovers(); 
    }); 

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

としてダニ機能のノードの位置を更新します：

blockを更新しました

nodes.each(collide(.2)) 
    .attr("transform", function(d){ //<-- use transform it's not a g 
    return "translate(" + d.x + "," + d.y + ")"; 
    }); 

---

これは、あなたのダブルデータバインドとダブルの動き更新が保存されます。

Answer 2

問題1：

あなたは正しくないサークルDOM、内のテキストを作っています。

<circle class="Low" cx="521.4462169807987" cy="183.39012004057906" r="10" id="171" data-original-title="" title="" aria-describedby="popover833687"><text dx="12" dy=".35em">171</text></circle>

これは、この方法をされている必要があります。

<circle class="ratingCategory1" cx="343.02601945806816" cy="333.91072717787176" r="10" id="9" data-original-title="" title="" aria-describedby="popover766707"></circle>

<text x="317.17351217946583" y="310.10556778212015" dx="12" dy=".35em" class="All-Objects">4</text>

これを実行する方法：

nodes.enter().append("circle") //make circle 
    //.attr("class", "node") 
    .attr("class", function(d) { 
     return d.ratingCategory; 
    }) 
    .attr("cx", function(d) { 
     return d.x; 
    }) 
    .attr("cy", function(d) { 
     return d.y; 
    }) 
    .attr("r", 2) 
    .attr("id", function(d){return d.objectName;}) 
    .on("mouseover", function(d) { 
     showPopover.call(this, d); 
    }) 
    .on("mouseout", function(d) { 
     removePopovers(); 
    }) 
    ; 



var text = svg.selectAll("text") 
     .data(data).enter().append("text") 
    .attr("x", function(d) { 
     return d.x; 
    }) 
    .attr("y", function(d) { 
     return d.y; 
    }) 
     .attr("dx",12) 
     .attr("dy",".35em") 
     .text(function(d){ 
      return d.objectName; 
     }); 

のPr oblem 2

ダニの関数内だけ円を更新しているが、テキストは、あなたが両方を更新する必要がありません。

 //update circle 
    d3.selectAll("circle").each(collide(.2)) 
     .attr("cx", function (d) { return d.x; }) 
     .attr("cy", function (d) { return d.y; }); 
    //update tick 
    d3.selectAll("text").each(collide(.2)) 
     .attr("x", function (d) { return d.x -20; }) 
     .attr("y", function (d) { return d.y; }); 

作業コードhere