使用自定义插件在mpld3散点图中的悬停时进行颜色更改

Question

当我将鼠标悬停在散点图上时，我试图在该点上更改颜色。最终，我想在这些点上添加更多效果，所以我想最好的方法是在mpld3 / plugins.py中创建一个自定义插件。

到目前为止，我已经能够在鼠标悬停时显示标签（并随便播放标签本身），并在鼠标单击这些点时打开新窗口。

但是，我无法弄清楚将效果应用于点本身的Javascript。

任何人都知道如何/在何处放置js代码以在下面的代码中执行以下操作？

class PointHTMLTooltip(PluginBase):
"""A Plugin to enable an HTML tooltip:
formated text which hovers over points.

Parameters
----------
points : matplotlib Collection or Line2D object
    The figure element to apply the tooltip to
labels : list
    The labels for each point in points, as strings of unescaped HTML.
hoffset, voffset : integer, optional
    The number of pixels to offset the tooltip text.  Default is
    hoffset = 0, voffset = 10
css : str, optional
    css to be included, for styling the label html if desired
Examples
--------
>>> import matplotlib.pyplot as plt
>>> from mpld3 import fig_to_html, plugins
>>> fig, ax = plt.subplots()
>>> points = ax.plot(range(10), 'o')
>>> labels = ['<h1>{title}</h1>'.format(title=i) for i in range(10)]
>>> plugins.connect(fig, PointHTMLTooltip(points[0], labels))
>>> fig_to_html(fig)
"""

JAVASCRIPT = """
mpld3.register_plugin("htmltooltip", HtmlTooltipPlugin);
HtmlTooltipPlugin.prototype = Object.create(mpld3.Plugin.prototype);
HtmlTooltipPlugin.prototype.constructor = HtmlTooltipPlugin;
HtmlTooltipPlugin.prototype.requiredProps = ["id"];
HtmlTooltipPlugin.prototype.defaultProps = {labels:null,
                                            hoffset:0,
                                            voffset:10};
function HtmlTooltipPlugin(fig, props){
    mpld3.Plugin.call(this, fig, props);
};

HtmlTooltipPlugin.prototype.draw = function(){
   var obj = mpld3.get_element(this.props.id);
   var labels = this.props.labels;
   var tooltip = d3.select("body").append("div")
                .attr("class", "mpld3-tooltip")
                .style("position", "absolute")
                .style("z-index", "10")
                .style("visibility", "hidden");


   obj.elements()
       .on("mouseover", function(d, i){
                          tooltip.html(labels[i])
                                 .style("visibility", "visible");})
       .on("mousemove", function(d, i){
              tooltip
                .style("top", d3.event.pageY + this.props.voffset + "px")
                .style("left",d3.event.pageX + this.props.hoffset + "px");
             }.bind(this))
       .on("mouseout",  function(d, i){
                       tooltip.style("visibility", "hidden");});
};
"""
def __init__(self, points, labels=None,
             hoffset=0, voffset=10, css=None):
    self.points = points
    self.labels = labels
    self.voffset = voffset
    self.hoffset = hoffset
    self.css_ = css or ""
    if isinstance(points, matplotlib.lines.Line2D):
        suffix = "pts"
    else:
        suffix = None
    self.dict_ = {"type": "htmltooltip",
                  "id": get_id(points, suffix),
                  "labels": labels,
                  "hoffset": hoffset,
                  "voffset": voffset}