3

私はこの場所でコードに従っています:

ここに画像の説明を入力

私のjsonファイルは次のようになります

[
{"name":"flare.analytics.A","size":3938,"imports":["flare.analytics.B,flare.analytics.C"]},
{"name":"flare.analytics.B","size":3812,"imports":["flare.analytics.C,flare.analytics.D"]},
{"name":"flare.analytics.C","size":3812,"imports":["flare.analytics.D,flare.analytics.E"]},
{"name":"flare.analytics.D","size":743, "imports":["flare.analytics.E,flare.analytics.F"]},
{"name":"flare.analytics.E","size":3534,"imports":["flare.analytics.F,flare.analytics.G"]},
{"name":"flare.analytics.F","size":5731,"imports":["flare.analytics.G,flare.analytics.H"]},
{"name":"flare.analytics.G","size":7840,"imports":["flare.analytics.H,flare.analytics.I"]},
{"name":"flare.analytics.H","size":5914,"imports":["flare.analytics.I,flare.analytics.A"]},
{"name":"flare.analytics.I","size":3416,"imports":["flare.analytics.B,flare.analytics.A"]}
]

このチュートリアル http://bl.ocks.org/Caged/6476579に従って、上記のコードにツールチップを追加しました。

追加した

.d3-tip in Style section

それから私は機能を追加しました

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency +     "</span>";
  })

svg.call(tip);

d.frequency の代わりに上記の html 関数にd3.select("text").text()を追加したので、

return "<strong>Frequency:</strong> <span style='color:red'>" + d3.select("text").text() +     "</span>";

マウスオーバー機能で追加しました

node
.classed("mouseover", tip.show);

mouseouted で追加しました

node
.classed("mouseover", tip.hide);

問題は、常にツリーから最初の要素を選択し、ツールチップとして表示することです

Show d3 node text only on hoverでこれに対する答えを見つけました。

しかし、それを自分のコードにどのように統合するのかわかりません

アップデート

node = node
  .data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
  .attr("class", "node")
  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
  .attr("dy", ".31em")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); })
  .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .text(function(d) { return d.key; })
  .on("mouseover", mouseovered)
  .on("mouseout", mouseouted);
});

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<span style='color:red'>" + d3.select("text").text()+ "</span>";
  })
4

1 に答える 1

2

mouseovered 関数で ('tip' を定義する場所ではなく)、ヒントの html プロパティを設定できます。

function mouseovered(d) {
   tip.html("<strong>Frequency:</strong> <span style='color:red'>" + d.key + "</span>"
);

このフィドルを参照してください: http://jsfiddle.net/henbox/XqEMf/3/

それ以外の場合は、マウスオーバーを行う前にツールチップの値を定義しています

また、ヒントの定義を次のように変更する必要があることに注意してください。

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0]);
于 2014-04-18T12:28:51.377 に答える