Javascript 在单击的文本元素上绘制箭头？

我正在尝试使单个单词/短语可单击，一旦选择了两个单词/短语，就提供一个选项，从一个单词到另一个单词画一条线（带箭头）。如何在d3中实现这一点

这里是一个我可以进行文本选择的地方（只需选择文本范围或双击单词）。现在，我需要做的就是在选定的文本元素上启用“单击”，并从一个元素到另一个元素绘制箭头。有什么建议吗

以下是迄今为止的代码：

body = d3.select('body')

svg = body.append('svg')
            .attr('height', 600)
            .attr('width', 600);

var g = svg.append('g').attr("transform" ,"scale(0)");

rect = g.append('rect')
        .attr('width', 300)
        .attr('height', 300)
        .attr('x', 40)
        .attr('y', 100)
        .style('fill', 'none')
        .attr('stroke', 'black')

text = g.append('foreignObject')
        .attr('x', 50)
        .attr('y', 130)
        .attr('width', 280)
        .attr('height', 280)
        .append("xhtml:body")
        .html('<p style="width: 280px;">This is some information about whatever where I want two words to be clickable individually and then provide a way to drag from one word to another to draw an arrow</p>').on('click', function() {
           console.log(d3.select(this).text()); 
        });

g.transition().duration(500).attr("transform" ,"scale(1)");

d3.selectAll("p").on("mouseup", checkSelection)
                 .on("keyup", checkSelection);

function checkSelection(d,i) {
    var selection = document.getSelection();

    if (selection.isCollapsed) return;

    var range = selection.getRangeAt(0);
    highlightRange(range);
}

function highlightRange(range) {
    var newNode = document.createElement("div");
    newNode.setAttribute(
       "style",
       "background-color: yellow; display: inline;"
    );
    range.surroundContents(newNode);
}

body=d3.选择（'body'））
svg=body.append（'svg'）
.attr（'height'，600）
.attr（'width'，600）；
var g=svg.append（'g'）.attr（“转换”，“缩放（0）”）；
rect=g.append（'rect'）
.attr（'width'，300）
.attr（'height'，300）
.attr（'x'，40）
.attr（'y'，100）
.style（'填充'，'无'）
.attr（'笔划'，'黑色'）
text=g.append（'foreignObject'）
.attr（'x'，50）
.attr（'y'，130）
.attr（'width'，280）
.attr（'height'，280）
.append（“xhtml:body”）
.html（'
这是有关我希望两个单词可以分别单击的位置的一些信息，然后提供一种从一个单词拖动到另一个单词以绘制箭头的方法。
”）。on（'click'，function（）{
log（d3.select（this.text（））；
});
g、 transition（）.duration（500.attr）（“transform”，“scale（1）”）；
d3.选择全部（“p”）。在（“鼠标悬停”，选中选择）
.打开（“键控”，选中选择）；
功能检查选择（d，i）{
var selection=document.getSelection（）；
if（selection.isCollapsed）返回；
var range=selection.getRangeAt（0）；
强光范围（射程）；
}
功能远光灯范围（范围）{
var newNode=document.createElement（“div”）；
newNode.setAttribute(
“风格”，
“背景色：黄色；显示：内联；”
);
range.surroundContents（newNode）；
}

使用d3拖动行为在选择之间绘制连接线。为绘制连接路径创建虚拟路径，并在拖动结束于选定区域时绘制一条线

JS

svg.append("defs").append("marker")
    .attr("id", "arrowhead")
    .attr("refX", 9)
    .attr("refY", 2)
    .attr("markerWidth", 6)
    .attr("markerHeight", 4)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0,0 V 4 L6,2 Z");

var dummy = svg.append("line")
    .attr("class","dummy")
    .style("display","none")
    .attr("marker-end", "url(#arrowhead)");

var drag = d3.behavior.drag()
    .on("dragstart", function(){   
       var x= d3.event.sourceEvent.x, y= d3.event.sourceEvent.y;
       dummy.attr("x1",x)
        .attr("y1",y).attr("x2",x)
        .attr("y2",y)
         .style("display","block");                        
    })
    .on("drag", function(d,i) {
       var x= d3.event.sourceEvent.x, y= d3.event.sourceEvent.y;
       dummy.attr("x2",x)
        .attr("y2",y)
    })
   .on("dragend",function(){
       var isSelected = d3.select(d3.event.sourceEvent.target).classed("selected");
       if(isSelected && d3.event.sourceEvent.target!=this){
           var x1=dummy.attr("x1"), y1=dummy.attr("y1"), 
               x2=dummy.attr("x2"), y2=dummy.attr("y2");
           svg.append("line")
           .attr("class","connector")
           .attr("x1",x1)
           .attr("y1",y1)
           .attr("x2",x2)
           .attr("y2",y2)
           .attr("marker-end", "url(#arrowhead)");             
       }
       dummy.style("display","none");
   });

function highlightRange(range) {
    var newNode = document.createElement("div");
    d3.select(newNode).attr("class","selected").call(drag);
    range.surroundContents(newNode);
}

风格

::selection {
    background-color:yellow;
}
.dummy{
    stroke: black;
    fill:none;
    stroke-width: 2px;
    stroke-dasharray: 5 5;
}
.connector{
    stroke: steelblue;
    fill:none;   
    stroke-width: 2px;
}
.selected{
   background-color: yellow;
   display: inline; 
}

---

更新了

我不知道我应该在小提琴上看到什么？那里什么也没发生。你说的“画箭头”是指你想改变鼠标指针吗？这将通过使用css“游标”实现。@Mouser:抱歉。请现在试一试。我无意中链接到了以前的小提琴。@Octopus:不。我想从一个单词/短语到另一个单词/短语划一条线。更新了问题。好的，你希望用什么代码画那个箭头？加上一个。这真是太棒了！非常感谢。