0

マウスオーバーでテキストを表示したいと思います。

var circle = elemEnter.append("circle")
          .attr("r", function(d){return d.r*2} )
          .attr("dx", function(d){return d.x} )
          .attr("stroke","gray")
          .attr("fill", "#91c6ed")
          .on("mouseover", function()
                          {d3.select(this).style("stroke", "#ff7f0e");
               d3.select(this).style("stroke-width", "2px");
               elemEnter.append("text")
                        .text(function(d){return d.name})})
          .on("mouseout", function()
                          {d3.select(this).style("stroke", "gray");
                           d3.select(this).style("stroke-width", "1px");});

このコードは機能しますが、すべての円にすべての名前が表示され、置換しようとすると

elemEnter.append("テキスト").テキスト(関数(d){return d.name})

に

d3.select(this).append("テキスト").text(d.name)

何も起こりません。

それは可能だと思いますが、何が間違っているのかわかりません。

4

1 に答える 1

2

円にテキストを追加することはできません。ag から始めて、円を g に追加し、テキストを g に追加する必要があります。g には cx/cy 属性がないため、そのデータを次の構文に入れる必要があることに注意してください。

.attr("transform", function (d) {return "translate("+d.X+","+d.Y")"})

データをバインドしている場合は、それを g にバインドしてから、円とテキストをそのまま g に追加します。

于 2013-05-07T23:12:45.717 に答える