树状图突出显示子节点 D3

Question

I am experimenting with http://jsfiddle.net/fVJBA/ and trying to get highlighting on the child-nodes on hover over. In the above example we have drawn child nodes on top of parent node. My query is to achieve a similar effect as http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/ . I tried adding:

g.selectAll(".child")
.data(function(d) { return d.children || [d]})
.enter().append("rect")
.attr("class", "child")
      .style("fill", function(d) { return d.children ? color(d.color) : color(d.color); })
.call(rect);

But that didn't seem to do the trick. Any idea/suggestions? All I need is to show the child name/value when we hover over the parent on top of which we have drawn child nodes?

Answer 1

I achieved this by adding : .on("mouseover", function(d) { console.log(d.value) }) on .child and removing the g.append("rect") .attr("class", "parent") .call(rect) .append("title") .

This helps to fetch the child nodes and removes the select from the parent container. Hope this helps someone working on this issue.