title: generate individual paths that are clickable in d3?
body: <p>I am drawing lines among random circles, and make each line clickable using path generator in d3. I am using selectAll, and binding data that is an array of x,y coordinates, but I can't figure out how to do this with path generator svg.line.</p>
  
  <p>Could anyone help me on this?</p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;script&gt;
  
  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&lt;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)')
  
  
  &lt;/script&gt;
  </code></pre>