Javascript 是否可以在D3中的鼠标上方显示本地视频

这个想法是当用户将指针指向一个正方形时，应该播放一个特定的视频。视频将存储在本地。方框位置的来源是excel，如果视频的src可以是相同的excel/CSV文件，那就太好了

d3.csv（“SainaMarinFullMatch.csv”），函数（数据）{
data.forEach（函数（d）{
d、 分离长度=+d.分离长度；
d、 sepalWidth=+d.sepalWidth；
d、 拉力=+d.拉力；
d、 Player=d.Player；
d、 Player2=d.Player2；
d、 AssistWinX-+d.AssistWinX；
d、 AssistWinY=d.AssistWinY；
d、 Source=+d.Source；
d、 目的地=+d.目的地；
});
//设置圆的样式，根据数据设置圆的位置
可变矩形=
groups.selectAll（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“圆”）
艾特先生({
函数（d）{返回x（+d.separawidth）；}，
y：函数（d）{返回y（+d.separalength）；}，
宽度：18，
身高：17，
//r:10，
id：函数（d）{返回d.Player；}
})
.样式（“填充”，功能（d）{
if（d.Result==“Win”）{return“LawnGreen”}//不检查if函数。
else if（d.Result==“Loss”）{返回“Red”}
else if（d.Result==“Assist”）{return“#c3d7df”}
else{return“#f2f2”}
;})
.样式（“不透明度”，函数（d）{
if（d.rally<0.25）{return 0.5}//不检查if函数。
否则，如果（d.rally>0.25和d.rally
d3.csv("SainaMarinFullMatch.csv", function(data) {


 data.forEach(function(d) {
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
    d.rally = +d.rally;
    d.Player = d.Player;
    d.Player2 = d.Player2;
    d.AssistWinX - +d.AssistWinX;
    d.AssistWinY = d.AssistWinY;
    d.Source = +d.Source;
    d.Destination = +d.Destination;
  });


    // style the circles, set their locations based on data
        var rects =
    groups.selectAll("rect")
        .data(data)
      .enter().append("rect")
      .attr("class", "circles")
      .attr({
        x: function(d) { return x(+d.sepalWidth); },
        y: function(d) { return y(+d.sepalLength); },
        width: 18,
        height: 17,
       // r: 10,
        id: function(d) { return d.Player ;}
      })
    .style("fill", function(d) {
        if (d.Result == "Win") {return "LawnGreen"}  // Not checking the If function.
        else if (d.Result =="Loss") { return "Red" }  
        else if (d.Result =="Assist") { return "#c3d7df" }
            else {return "#f2f2f2"}
        ;})
    .style("opacity", function(d) {
        if (d.rally < 0.25) {return 0.5}  // Not checking the If function.
        else if (d.rally > 0.25 && d.rally <= 0.5) { return 0.75 }  
        else {return 1}
        ;})
        .attr("data-legend",function(d) { return d.Result}) // Trying to add legend

        ;

    // what to do when we mouse over a bubble
    var mouseOn = function() { 
        var rect = d3.select(this)

    // transition to increase size/opacity of bubble
        .transition()
        .attr({
        x: function(d) { return x(+d.sepalWidth); },
        y: function(d) { return y(+d.sepalLength); },   
        width: 28,
        height: 28,
       // r: 10,
        id: function(d) { return d.Player ;}
      })
        .ease("elastic")
        .duration(800).style("opacity", 1)

        //.size(function(d) {return ("r");})
        ;


        // append lines to bubbles that will be used to show the precise data points.
        // translate their location based on margins
    //  svg.append("svg")
    //      .attr("class", "guide")
    //  .append("line")
    //      .attr("x1", +rect.attr("x"))
    //      .attr("x2", 3) // If i hardcode values here it works
    //      .attr("y1", +rect.attr("y"))
    //      .attr("y2", 26) // If i hardcode values here it works
    //      .attr("transform", "translate(17, 38)") // Need to check this
    //      .attr("stroke", "Red")
    //      .attr("stroke-width", 2)

    // function to move mouseover item to front of SVG stage, in case
    // another bubble overlaps it
        d3.selection.prototype.moveToFront = function() { 
          return this.each(function() { 
            this.parentNode.appendChild(this); 
          }); 
        };

    // skip this functionality for IE9, which doesn't like it
        if (!$.browser.msie) {
            rect.moveToFront(); 
            };
          };


    // what happens when we leave a bubble?
    var mouseOff = function() {
        var rect = d3.select(this);

        // go back to original size and opacity
        rect.transition()
        .duration(800)
        .style("opacity", function(d) {
        if (d.rally < 0.25) {return 0.5}  // Not checking the If function.
        else if (d.rally > 0.25 && d.rally <= 0.5) { return 0.75 }  
        else {return 1}
       ;})
        .attr({
        x: function(d) { return x(+d.sepalWidth); },
        y: function(d) { return y(+d.sepalLength); },
        width: 18,
        height: 17,
       // r: 10,
        id: function(d) { return d.Player ;}
      })
        .ease("elastic")

        ;

        // fade out guide lines, then remove them
        d3.selectAll(".guide").transition().duration(100).styleTween("opacity", 
                        function() { return d3.interpolate(.5, 0); })
            .remove()
    };

    // run the mouseon/out functions
    rects.on("mouseover", mouseOn);
    rects.on("mouseout", mouseOff);

    // tooltips (using jQuery plugin tipsy)
    rects.append("title")
            .text(function(d) { return d.Result + " by " + d.Player + ". " + "Last Shot Played:" + d.Shot +". " + "Total No.of Rallies:" + d.RallyLength; }) // Need to change the data to text box
    $(".rects").tipsy({ gravity: 's',});