d3 selectall单击不起作用

Question

In the following code I am drawing a line chart and added filter to draw circles for only certain coordinates depending on the condition.

What I want to do is if user clicks on those circles they should be able to see alert message with data coordinates.

I added onclick function but it's not getting called.

 <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.js"></script> <script> var width = 900, height = 500; nv.addGraph(function () { var chart = nv.models.lineChart() .width(width) .height(height) .margin({ left: 75, right: 50 }); chart.xAxis.axisLabel('Time (ms)') .tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Voltate (vt)') .tickFormat(d3.format('.2f')); var sampleSVG =d3.select('#chart svg'); sampleSVG .datum(myData()) .transition().attr('width', width).attr('height', height).duration(500) .call(chart) .each("end", function() { var data = myData(); d3.select('.nv-groups').selectAll("circle") .data(data[0].values.filter(function(d) { return dy > 3000; })) .enter().append("circle") .style("stroke", "gray") .style("fill", "blue") .attr("r", 5) .attr("cx", function(d) { return chart.xAxis.scale()(dx);}) .attr("cy", function(d) { return chart.yAxis.scale()(dy);}) //.on("click", function(d) { alert('on click called.'+chart.lines.x() ); } ); }); },function(){ var svg_circles = d3.selectAll("circle"); //alert('in function'+svg_circles); svg_circles.on('click', function(){ alert('on clk called '); console.log("test"); }); }); function myData() { return data = [{ "values": [{ "x": 0, "y": 3235, "isAlert" :'1', "alertInfo" : 'Alert generated for this trade' }, { "x": 173, "y": 2114 }, { "x": 347, "y": 1724 }, { "x": 526, "y": 2703 }, { "x": 700, "y": 2980 }, { "x": 931, "y": 3086 }, { "x": 1058, "y": 2881 }, { "x": 1220, "y": 2817 }, { "x": 1399, "y": 2242 }, { "x": 1584, "y": 2639 }, { "x": 1752, "y": 3122 }, { "x": 1983, "y": 3157 }, { "x": 2105, "y": 3391 }, { "x": 2284, "y": 3441 }, { "x": 2469, "y": 3356 }, { "x": 2637, "y": 3498 }, { "x": 2811, "y": 3753 }, { "x": 3042, "y": 3384 }, { "x": 3169, "y": 3399 }, { "x": 3331, "y": 3399 }, { "x": 3522, "y": 2164 }, { "x": 3690, "y": 2129 }, { "x": 3863, "y": 2200 }, { "x": 4095, "y": 2292 }], "key": "Stocks Data", "color": null }]} </script> 

 <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css"> 

 <div id="chart"> <svg></svg> </div> 

Answer 1

The problem appears to be that your circles are not at the front of the SVG. One quick workaround is to append your circles to NVD3's interactive layer in your each() function and remove the callback from addGraph() .

var svg = d3.select(this);
svg.select('.nv-interactive').selectAll("circle")

However, this partially blocks the mouseover/tooltip events to NVD3's points (under #nv-point-clips ).

EDIT: Here's a fiddle: http://jsfiddle.net/g6sp5p0f/9/ . This is using NVD3's current master release, so it may not work with a newer/development version.