d3 selectall单击不起作用

Question

在下面的代码中，我正在绘制折线图，​​并添加了过滤器以根据条件仅绘制某些坐标的圆。

我想做的是，如果用户单击这些圆，他们应该能够看到带有数据坐标的警报消息。

我添加了onclick函数，但是没有被调用。

 <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

问题似乎是您的圈子不在SVG的前面。 一种快速的解决方法是将您的圈子添加到each()函数中的NVD3的交互层，并从addGraph()删除回调。

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

但是，这部分阻止了将鼠标悬停/工具提示事件阻止到NVD3的点（在#nv-point-clips ）。

编辑：这是一个小提琴： http : //jsfiddle.net/g6sp5p0f/9/ 。 这是使用NVD3的当前主版本，因此它可能不适用于较新/开发的版本。