Изменение цвета при наведении на точечный график mpld3 с помощью пользовательского плагина - PullRequest
Новая
       16

Изменение цвета при наведении на точечный график mpld3 с помощью пользовательского плагина

0 голосов
/ 18 ноября 2018

Я пытаюсь получить точку на точечной диаграмме, чтобы изменить цвет при наведении на нее курсора.В конце концов, я хотел бы добавить больше эффектов к точкам, поэтому я решил, что лучшим способом было бы создать собственный плагин в 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}
...