Question

I would like to create a mashup of the functionalities as seen from

http://bl.ocks.org/4063423 and http://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html

I would like to use d3.js or at least a pure javascript solution but a solution that will respond to mouse clicks to display more information about the selected section.

Zooming in and out is not mandatory, but if I can achieve it, it will be good.

Now my question, Is there a framework that can support this or do I have to mash them up on my own.

Disclaimer: google was not that helpful!

Answer 1

It is easy to do with D3 alone: http://bl.ocks.org/4678148 If you click any element, the element will be focused and transitioned to 90 deg with the selected class set on it.

Also, the legend text on the top right changes to the name of the element selected. The part of code which achieves this coupling is:

d3.selectAll("path").on("click", function (d, i) {
  var newAngle = - (d.x + d.dx / 2);

  innerG
    .transition()
      .duration(1500)
      .attr("transform", "rotate(" + (180 / Math.PI * newAngle) + ")");

  // Set the class "selected" on the chosen element.
  path
    .classed("selected", function (x) { return d.name == x.name; });

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});

---

Update

For the zoomable behavior such that the clicked element transitions to the center, you can use almost the same code as used as here or here. I have made small changes to the code to show how to extract information about which item was clicked: http://bl.ocks.org/4747342

The change in code required is simpler than before:

d3.selectAll("path").on("click", function (d, i) {  

  // Zooming
  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d));

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});