8

折りたたみ可能なツリー グラフを開発しています。ノードでマウスオーバーイベントを生成しようとしています。その時点でノードにマウスを合わせると、ノードの名前が表示されます。試してみましたが、変換属性値を計算してノードの上または下に名前を表示する方法がわかりません。

var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click)
      .on("mouseover", function(d){
            alert("over");
        d3.select(this).attr('transform', function(d){ return 'translate(?,?)'})
        .text(d.name + ": " + d.id)
        .style('display', null);
      })
      .on("mouseout", function(d){ alert("out"); d3.select(this).style('display', 'none'); });

翻訳(?、?)

折りたたみ可能なツリー グラフのリンク: http://bl.ocks.org/mbostock/4339083

私を助けてみてくださいありがとう

4

1 に答える 1

16

その場所に変換されたクラス ノードのグループ。その下にアイテムを追加する場合は、相対座標を使用できます。たとえば、円の中心は、(デフォルトでは) グループに相対的な (0, 0) 座標にあります。円の下に 10 ピクセル、右に 20 ピクセルのテキストを追加する場合は、次のようにします。

var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { 
      return "translate(" + source.y0 + "," + source.x0 + ")"; 
  })
  .on("click", click)
  .on("mouseover", function(d) {
      var g = d3.select(this); // The node
      // The class is used to remove the additional text later
      var info = g.append('text')
         .classed('info', true)
         .attr('x', 20)
         .attr('y', 10)
         .text('More info');
  })
  .on("mouseout", function() {
      // Remove the info text on mouse out.
      d3.select(this).select('text.info').remove();
  });

よろしく。

于 2013-10-10T14:49:04.453 に答える