如何修改 mpld3 LinkedView 插件以绘制多行

问题描述

我想修改这个例子中的 LinkedView 插件

import matplotlib
import matplotlib.pyplot as plt
import numpy as np
import mpld3
from mpld3 import plugins,utils


class LinkedView(plugins.PluginBase):
    """A simple plugin showing how multiple axes can be linked"""

    JAVASCRIPT = """
    mpld3.register_plugin("linkedview",LinkedViewPlugin);
    LinkedViewPlugin.prototype = Object.create(mpld3.Plugin.prototype);
    LinkedViewPlugin.prototype.constructor = LinkedViewPlugin;
    LinkedViewPlugin.prototype.requiredProps = ["idpts","idline","data"];
    LinkedViewPlugin.prototype.defaultProps = {}
    function LinkedViewPlugin(fig,props){
        mpld3.Plugin.call(this,fig,props);
    };

    LinkedViewPlugin.prototype.draw = function(){
      var pts = mpld3.get_element(this.props.idpts);
      var line = mpld3.get_element(this.props.idline);
      var data = this.props.data;

      function mouSEOver(d,i){
        line.data = data[i];
        line.elements().transition()
            .attr("d",line.datafunc(line.data))
            .style("stroke",this.style.fill);
      }
      pts.elements().on("mouSEOver",mouSEOver);
    };
    """

    def __init__(self,points,line,linedata):
        if isinstance(points,matplotlib.lines.Line2D):
            suffix = "pts"
        else:
            suffix = None

        self.dict_ = {"type": "linkedview","idpts": utils.get_id(points,suffix),"idline": utils.get_id(line),"data": linedata}

fig,ax = plt.subplots(2)

# scatter periods and amplitudes
np.random.seed(0)
P = 0.2 + np.random.random(size=20)
A = np.random.random(size=20)
x = np.linspace(0,10,100)
data = np.array([[x,Ai * np.sin(x / Pi)]
                 for (Ai,Pi) in zip(A,P)])
points = ax[1].scatter(P,A,c=P + A,s=200,alpha=0.5)
ax[1].set_xlabel('Period')
ax[1].set_ylabel('Amplitude')

# create the line object
lines = ax[0].plot(x,0 * x,'-w',lw=3,alpha=0.5)
ax[0].set_ylim(-1,1)

ax[0].set_title("Hover over points to see lines")

# transpose line data and add plugin
linedata = data.transpose(0,2,1).tolist()
plugins.connect(fig,LinkedView(points,lines[0],linedata))

mpld3.show()

为每个点在同一轴上绘制多条线。因此,例如,如果我将数据扩展为还包括余弦曲线

data = np.array([[x,Ai * np.sin(x / Pi),Ai * np.cos(x / Pi)] for (Ai,P)])

如何让插件同时显示正弦和余弦曲线?我想我可以通过创建第二行对象来手动完成,但肯定有更好的方法

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)