是否可以在D3中鼠标悬停时显示本地视频

Question

http://s2.postimg.org/z6su9cl4p/screen.jpg

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

https://codepen.io/anon/pen/WryBqM

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',});