将选择显示到SVG矩形（JavaScript）

我看到并想复制它/使它更好-因为它让我感兴趣。但是，我一直坚持将选择显示在SVG矩形中。我认为通过在调用套索的函数中添加文本会起作用，但事实并非如此。我已经包含了有问题的代码，我想知道哪里出了问题，需要改进。谢谢

如果你还需要代码，霍拉

var textBox = svg.append("g")
        .attr("transform", "translate(5,385)");

textBox.append("rect")
        .attr("height", 10)
        .attr("width", 100)
        .style("stroke", "black")
        .style("fill", "none")
        .style("stroke-width", 1);

        var lasso_start = function() {
        lasso.items()
            .attr("r",7) 
            .classed("not_possible",true)
            .classed("selected",false);
};

var lasso_draw = function() {

        lasso.possibleItems()
            .classed("not_possible",false)
            .classed("possible",true);

        lasso.notPossibleItems()
            .classed("not_possible",true)
            .classed("possible",false);
};

var lasso_end = function() {

        lasso.items()
            .classed("not_possible",false)
            .classed("possible",false);

        selected = lasso.selectedItems()
            .classed("selected", true)
            .attr("r", 13);

        var selectedDots = selected.data().map(d=>d[0]);

};

var lasso = d3.lasso()
        .closePathSelect(true)
        .closePathDistance(100)
        .items(circles)
        .targetArea(area)
        .on("start",lasso_start)
        .on("draw",lasso_draw)
        .on("end",function(d) {
            textBox.append("text")
                .attr("x", 10)
                .attr("y", 20)
                .text(lasso_end)
});

svg.call(lasso);

修改我作为答案发布的，将选择包含在一个rect中的，这里有一个fork：

如果方便的话，还有一段代码片段：

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans+压缩：300’；
@导入url（“https://fonts.googleapis.com/css?family=Lato:300");
正文{
字体系列：“开放式Sans压缩”；
}
.轴路径{
笔画：黑色；
}
.勾线{
可见性：隐藏；
}
.边界{
边缘顶部：9px；
左边距：29px；
边框：.5px纯黑色；
宽度：325px；
高度：335px；
位置：绝对位置；
}
.套索路径{
行程：rgb（80,80,80）；
笔画宽度：2px；
}
.套索{
填充不透明度：.05；
}
.lasso.loop_关闭{
填充：无；
笔划数组：4，4；
}
.套索.起源{
填充：#3399FF；
填充不透明度：.5；
}
.不可能{
填充：rgb（200200）；
}
.textBox rect{
填充：钢蓝；
}
文本选择{
字体大小：12px；
填充：#FFF；
字母间距：0.1米；
字体大小：300；
}

!函数（t，n）{“对象”==typeof exports&“undefined”！=typeof module？n（exports，require（“d3 selection”），require（“d3 drag”）：“函数”==typeof define&&define.amd？define（[“exports”，“d3 selection”，“d3 drag”]），n:n（t.d3=t.d3{，t.d3，t.d3，t.d3）}（此函数（t，n，r）{“严格使用”；函数e（t，n）{返回n={exports:{导出：}，n，导出，n，n}函数）{function t（t）{function u（）{p=[]，h=”，u lasso.hoverSelect=！1，t.u lasso.loopSelect=！1，t.u lasso.var n=t.getBoundingClientRect（）；t.u lasso.opoint=！1，t.u lasso.hoverSelect=！1，t.u lasso.loopSelect=！1；var n=t.getBoundingClientRect（）；t.u lasso.opoint=[Math.round（n.left+n.round/n.width/2），mouseon/lasso{this.uu lasso.hoverSelect=！0}），i.start（）}函数l（）{var t，n；“touchmove”==d3.event.sourceEvent.type？（t=d3.event.sourceEvent.touchs[0].clientX，n=d3.event.sourceEvent.touchs[0].clientY:（t=d3.event.sourceEvent.clientX，n=d3.event.sourceEvent.clientY）；var s=d3.mouse（this）[][[0]，u=d3.mouse（this][1]；==h=h=h=h+sourceEvent.sourceEvent.sourceEvent.sourceEvent.clientX，n][attr（display，null））：h=h+“L”+s+“”+u，p.push（[t，n]）；var L=Math.sqrt（Math.pow（t-v[0]，2）+Math.pow（n-v[1]，2）），f=“M”+s+“”+u+“L”+d[0]+“”+d[1]；u.attr（“d”，h），M.attr（“d”，f），a=lWow，这是一个非常优雅的解决方案。谢谢！很高兴我能帮上忙：）