D3.js 生成可在d3中单击的单独路径？

我在随机圆圈中画线，并使用d3中的路径生成器使每条线都可以点击。我使用的是selectAll和绑定数据，即x，y坐标的数组，但我不知道如何使用路径生成器svg.line实现这一点

有人能帮我吗

谢谢大家!

<script>

var svg = d3.select("body").append('svg')
        .attr('class','container')
        .attr('width','800')
        .attr('height','700')
        .style('background-color','#545454')


var data = [];
//data.push('yahoo')
for (var i = 0; i<50; i++){
     data.push([Math.random()*32*13*(3.14/2),Math.random()*13*35])
 }

line = d3.svg.line()
        .x(function(d) {
                    console.log(d)
            return d[0];})

        .y(function(d){
            console.log(d)
            return d[1];})

var mapColor =  d3.scale.linear()
            .range(['rgb(247,251,255)','rgb(222,235,247)','rgb(8,48,107)'])
            //.range([#003153,#668397,'#99acba'])

svg.selectAll('.test1')
    .data([[50,60],[100,200],[50,100]])
    .enter()
    .append('path')             
    .attr('class','test1')
    .attr('stroke','black')
    .attr('stroke-width','2px')
    .attr('fill','none')
    .attr('d',function(d){
        return line(d)
    })

svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx',function(d,i){ return d[0]} )
    .attr('cy',function(d,i){ return d[1]} )
    .attr('r',function(d,i){
        return (1.618*Math.random()*2*Math.log(i*i*i))
    } )
    .style('fill',function(d){
        return "#BD89EF";
        //return 'rgb(107,174,214)';
    })
    // .style('fill','#003153')
    .attr("stroke-width",'0.1px')
    //.style("stroke","solid")
    .style("opacity",0.5)
    .attr('transform','translate(100,100)')


svg.selectAll('path')
    .data(data)
    .enter()
    .append('path')
    .attr('d', function(d,i){ 
      //  var a = [data[i],data[i+1]]
        return line(d);
   })
     .attr('fill','none')
    .attr('stroke','#C4CCD3')
    .attr('stroke-width','0.5px')

// var g = svg.append("g")
//          .datum(data)
//  .append('path')
//      .attr('d',line)
//      //.attr('d',line(data))
//       // .attr("d",function(d){
//          // console.log(d)
//          // console.log(data)
//          // console.log(g)
//          // return line(data)})
//  .attr('fill','none')
//  .attr('stroke','#C4CCD3')
//      .attr('stroke-width','0.5px')
// .attr('transform','translate(100,100)')


</script>

---

使用line generator创建行之后，应该能够使用d3.select选择它们，然后使用.onclick，函数{…}；为使其可点击，请对缺乏澄清表示抱歉。另一个问题是，当我使用.selectAll、.data、.enter附加坐标时，该线不会绘制。。。