3

I am following code at this location:

enter image description here

My json file looks like this

[
{"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"]}
]

I added a tooltip in above code following this tutorial http://bl.ocks.org/Caged/6476579.

I added

.d3-tip in Style section

Then i added function

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);

Now in above html function instead of d.frequency i added d3.select("text").text() so it became

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

In my mouseovered function i added

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

in mouseouted i added

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

The problem is, it always select the first element from my tree and displays as tooltip

I found an answer to this at Show d3 node text only on hover.

But I am not sure how would i integrate that in my code

UPDATE

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>";
  })
Community
  • 1
  • 1
Neil
  • 1,715
  • 6
  • 30
  • 45
  • What's the text that's shown? Use the same expression you use to set that for the tooltip. – Lars Kotthoff Apr 18 '14 at 10:09
  • @LarsKotthoff Whatever text i hover, It shows me "A" every time, First letter in my JSON file. The problem is it is divided in 2 separate functions. Not sure how would i merge them. How would the transition happen – Neil Apr 18 '14 at 11:03
  • Can you show us the code you're using to set the content of the `text` elements? – Lars Kotthoff Apr 18 '14 at 11:52
  • Have you tried using `d.key` in the tooltip as well? – Lars Kotthoff Apr 18 '14 at 12:00
  • Yes. When i add that, it shows me last node instead of first. i.e "I" – Neil Apr 18 '14 at 12:02
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50964/discussion-between-neil-and-lars-kotthoff) – Neil Apr 18 '14 at 12:10

1 Answers1

2

You can set the tip's html property when in the mouseovered function (rather than where you define 'tip'):

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

See this fiddle: http://jsfiddle.net/henbox/XqEMf/3/

Otherwise you're defining the value of the tooltip before you do any mouse-overing

Note you'll also want to change the tip definition to just:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0]);
Henry S
  • 3,072
  • 1
  • 13
  • 25