d3 selectall on click不起作用

在下面的代碼中，我繪製折線圖並添加了過濾器，以根據條件僅爲某些座標繪製圓。d3 selectall on click不起作用

我想要做的是，如果用戶點擊這些圈子，他們應該能夠看到具有數據座標的警報消息。

我添加了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')); 
 
    
 
\t var sampleSVG =d3.select('#chart svg'); 
 
\t  
 
\t sampleSVG 
 
\t .datum(myData()) 
 
\t .transition().attr('width', width).attr('height', height).duration(500) 
 
\t \t .call(chart) 
 
\t \t .each("end", function() { 
 
\t \t \t \t var data = myData(); 
 
      
 
\t \t \t \t d3.select('.nv-groups').selectAll("circle") 
 
\t \t \t \t .data(data[0].values.filter(function(d) { return d.y > 3000; })) 
 
\t \t \t \t .enter().append("circle") 
 
\t \t \t \t .style("stroke", "gray") 
 
\t \t \t \t .style("fill", "blue") 
 
\t \t \t \t .attr("r", 5) 
 
\t \t \t \t .attr("cx", function(d) { return chart.xAxis.scale()(d.x);}) 
 
       .attr("cy", function(d) { return chart.yAxis.scale()(d.y);}) 
 
\t \t \t \t //.on("click", function(d) { alert('on click called.'+chart.lines.x()); }); \t \t 
 
\t \t \t \t 
 
\t \t }); 
 

 

 
},function(){ 
 
\t var svg_circles = d3.selectAll("circle"); 
 
\t //alert('in function'+svg_circles); 
 
\t svg_circles.on('click', 
 
\t \t function(){ 
 
\t \t \t alert('on clk called '); 
 
\t \t \t console.log("test"); 
 
\t }); 
 
}); 
 

 

 

 

 
function myData() { 
 
    return data = [{ 
 
     "values": [{ 
 
      "x": 0, 
 
      "y": 3235, 
 
\t \t \t "isAlert" :'1', 
 
\t \t \t "alertInfo" : 'Alert generated for this trade' 
 
\t \t \t 
 
     }, { 
 
      "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>

來源

2015-05-08 user21

這個問題似乎是你的圈子是不是在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的當前主版本，所以它可能無法使用更新/開發版本。

來源

2015-05-09 18:34:47 Turgar

嘗試過這種方式，但它不工作，如果你有任何示例，請張貼。 – user21

添加了小提琴（http://jsfiddle.net/g6sp5p0f/9/）。你能看到這是否有幫助嗎？ – Turgar

d3 selectall on click不起作用

回答

相關問題