Добавление текста в 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; 
    }); 

и обновить позицию узла в функции клеща как:

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

---

Обновлено block.

Answer 2

Задача 1:

Вы делаете текст внутри круга йот, что не является правильным.

<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