https://jsfiddle.net/t52f1rn7/

Estoy tratando de hacer un gráfico de líneas con ciclos al final de las líneas. Quiero seleccionar dos puntos y dibujar líneas haciendo clic. Luego encontré el complemento de lazo y estoy tratando de usarlo para el mismo propósito: seleccionar dos puntos y conectar ¿Es posible?

Actualmente mi código está mostrando no puede leer la propiedad "forEach" de undefined?

¿por qué no lee círculos y variables svg en lazo?

body
   {
    background-color : black;
   }

   svg
   {
    background-color: white;
   }

   /* Styling for new <div> */
    #tooltip {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        margin: 0;
        padding: 5px;
        width: 30px;
        height: 12px;
        color: white;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        background-color: black;
        opacity: 0;
    }

     .lasso path {
        stroke: rgb(80,80,80);
        stroke-width:2px;
    }

    .lasso .drawn {
        fill-opacity:.05 ;
    }

    .lasso .loop_close {
        fill:none;
        stroke-dasharray: 4,4;
    }

    .lasso .origin {
        fill:#3399FF;
        fill-opacity:.5;
    }

    .not_possible {
        fill: rgb(200,200,200);
    }

    .possible {
        fill: #EC888C;
    }

    .selected {
        fill: steelblue;
    }


    var w = 500;
    var h = 500;
    var padding = 40;
    var tt = 4000;

    var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height",h);


    var data1 = [];
    var i = 50;
    var p = Math.random()*1000;
    var q = Math.random()*1000;
    for(var j=0;j<i;j++)
    {
        var a = j;
        var b = Math.round(Math.random()* q);
        data1.push({
            a:a,
            b:b
        })
    }
    console.log(data1);

    var xscale = d3.scaleLinear()
                    .domain([0,d3.max(data1,function(d)
                                                   {
                                                    return d.a;
                                                   })])
                    .rangeRound([padding,w-padding]);

    var yscale = d3.scaleLinear()
                   .domain([0,d3.max(data1,function(d)
                                                  {
                                                    return d.b;
                                                  })])
                   .rangeRound([h-padding,padding]);

    var xaxis = d3.axisBottom(xscale)
                  .ticks(10);

    var yaxis = d3.axisLeft(yscale)
                  .ticks(10);

    var l = data1.length;

    var line = d3.line()
                 .x(function(d)
                           {
                            return xscale(d.a);
                           })
                 .y(function(d)
                            {
                            return yscale(d.b);
                            });

var paths =  svg.append("path")
     .datum(data1)
     .attr("fill","none")
     .attr("stroke","pink")
     .attr("stroke-linejoin","round")
     .attr("stroke-linecap","round")
     .attr("stroke-width",1.5)
     .attr("d",line);

var len = paths.node().getTotalLength();

paths
    .attr("stroke-dasharray",len+" " +len)
    .attr("stroke-dashoffset",len)
    .transition()
    .duration(tt)
    .attr("stroke-dashoffset",0);







var circles =    svg.selectAll("circle")
       .data(data1)
       .enter()
       .append("circle")
       .attr("cx",function(d)
                        {
                            return xscale(d.a);
                        })
       .attr("cy",function(d)
                        {
                            return yscale(d.b);
                        })
       .attr("r",5)
       .attr("fill","blue")
       .attr("cursor","pointer");
       /*.on("mouseover", function(d) {

                        var x = d3.event.pageX;
                        var y = d3.event.pageY - 20;

                        d3.select("#tooltip")
                            .style("left", x + "px")
                            .style("top", y + "px")
                            .style("opacity", 1)
                            .text(d.a + "," + d.b);

                    })
                    .on("mouseout", function() {

                        d3.select("#tooltip")
                            .style("opacity", 0);

                    })*/





       svg.append("g")
          .attr("transform","translate(0"+","+(h-padding)+")")
          .call(xaxis);

        svg.append("g")
           .attr("transform","translate("+padding+","+"0)")
           .call(yaxis);




        circles
          .on("click",function(d)
                             {
                                alert(d.a+","+d.b);
                             });




    // Lasso functions
    var lasso_start = function() {
        lasso.items()
            .attr("r",3.5) // reset size
            .classed("not_possible",true)
            .classed("selected",false);
    };

    var lasso_draw = function() {

        // Style the possible dots
        lasso.possibleItems()
            .classed("not_possible",false)
            .classed("possible",true);

        // Style the not possible dot
        lasso.notPossibleItems()
            .classed("not_possible",true)
            .classed("possible",false);
    };

    var lasso_end = function() {
        // Reset the color of all dots
        lasso.items()
            .classed("not_possible",false)
            .classed("possible",false);

        // Style the selected dots
        lasso.selectedItems()
            .classed("selected",true)
            .attr("r",7);

        // Reset the style of the not selected dots
        lasso.notSelectedItems()
            .attr("r",3.5);

    };

    var lasso = d3.lasso()
        .closePathSelect(true)
        .closePathDistance(100)
        .items(circles)
        .targetArea(svg)
        .on("start",lasso_start)
        .on("draw",lasso_draw)
        .on("end",lasso_end);

    svg.call(lasso);