0

I'm building a d3 zoomable packed circle chart. On the side of the screen I have a table listing the names of each of the nodes. They're linked up nicely so if you mouseover one, it adjusts the fill or background-color of the other.

I'm trying to figure out how to trigger a zoom-in to the linked circle when the user clicks on the associated hyperlink in the table.

I know how to trigger a zoom-out to the root by calling .click() on the div that contains the chart:

$('#Phylomap').click()

I have tried calling .click() on the individual circles in the chart, e.g.:

$('#PhylomapNode27').click();

But it doesn't trigger a zoom, even though a zoom can be triggered when you actually click on the circle. Pasting that line into the console just returns the node as a single element array... no zoom. For what its worth, I can manipulate the style of the circle like this:

$('#PhylomapNode27').css("stroke", "grey");

And the constructor does have an onclick line in it, just under the part where I assign the ID attribute:

.on("click", function (d) { return zoom(node == d ? root : d); })

Any suggestions would be most appreciated!

user2588094
  • 31
  • 2
  • 5
  • My first guess is perhaps the `click()` should happen on a different element? Link? Put a `console.log()` in your `#PhylomapNode27` to verify that the `click()` even really isn't propagating to your element (perhaps it is and its failing for another reason). – dsummersl Feb 13 '15 at 21:53
  • I managed to trigger the click event using a solution mentioned here: http://stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmaticaly-in-d3 BUT the zoom does not happen. I can trigger an alert box, but not the zoom. Any thoughts on why? – user2588094 Feb 15 '15 at 23:58

0 Answers0