Clickable datapoints that launches a closed modal window in a d3 diagram (nvd3)

Question

First of all, I want to thank the community for your help that I received.

I am creating a custom version of the example here http://nvd3.org/ghpages/scatter.html

Is there a way to make each circle clickable? and then when you click on the link, is there a modal popup that appears from the circle? with close button on modal.

I know this sounds complicated, but it's just not easy for me to switch to this NVD3 library, was it obsolete / abandoned? I can not find any documentation on it. I read Scott Murray’s manual, but it looks like the NVD3 library has been changed a lot, most of what I read from Scott Murray doesn’t actually apply in this example.

my page with examples is here http://goo.gl/pUKW9 , but I have the code ....

<div id="offsetDiv"> <div id="test1" class="chartWrap"> <svg></svg> </div> </div> <script> //Format A var chart; nv.addGraph(function() { chart = nv.models.scatterChart() .showDistX(true) .showDistY(true) //.height(500) .useVoronoi(true) .color(d3.scale.category10().range()); chart.xAxis.tickFormat(d3.format('.02f')) chart.yAxis.tickFormat(d3.format('.02f')) d3.select('#test1 svg') .datum(randomData(4,40)) .transition().duration(500) .call(chart) nv.utils.windowResize(chart.update); chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); return chart; }); function randomData(groups, points) { //# groups,# points per group var data = [ {key: 'Weak Guidance', values: [ {x: 1, y: 1} , {x: 2, y: 3} , {x: 4, y: 9 }]}, {key: 'Strong Guidance', values: [ {x: 32, y: 0} , {x: 3, y: 54} , {x: 1, y: 8} ] }]; return data; } </script> 

Answer 1

I don’t know if nvd3 supports any functionality for attaching handlers to elements (I think it’s not), but you can do this quite easily in pure d3. The code would look like

 svg.selectAll("circle").on("click", function(d, i) { ... }); 

where svg is a reference to the graph container element. You may need to be more specific in the selector, for example. add a specific class ( selectAll("circle.myclass") ).

Neither d3 nor nvd3 provide any functionality for modal dialogs. However, you can use something like a jQuery dialog . The code that creates the dialog is part of the event handler function.