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 d.y > 3000; }))
				.enter().append("circle")
				.style("stroke", "gray")
				.style("fill", "blue")
				.attr("r", 5)
				.attr("cx", function(d) { return chart.xAxis.scale()(d.x);})
                .attr("cy", function(d) { return chart.yAxis.scale()(d.y);})
				//.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的当前主版本，因此它可能不适用于较新的/开发版本。

d3 selectall on click无法正常工作

1 个答案: