Mpld3库一个matplotlib被忽视功能，python数据可视化web库

　　1 说明：
　　=====
　　1.1 MPLD3=mpl+d3=matplotlib+D3js。
　　1.2 是基于当前python下面最流行的图形图像库matplotlib和最知名的javascript库D3js上开发得到的。
　　1.3 用于创建web交互式数据可视化。
　　1.4 mpld3——Bringing Matplotlib to the Browser。
　　2 准备：
　　=====
　　2.1 官网：https://pypi.org/project/mpld3/ https://github.com/mpld3/mpld3 http://mpld3.github.io/  #很慢很卡，我没上去
　　2.2 安装：pip install mpld3  #其实不用安装，新版的matplotlib自带的
　　2.3 环境：
　　华为笔记本电脑、深度deepin-linux操作系统、谷歌浏览器、python3.8和微软vscode编辑器。
　　3 折线图：
　　========
　　3.1 代码：#折线图 #从模块导入就知道，mpld3是matplotlib自带的 import matplotlib.pyplot as plt, mpld3 #import mpld3  #也可以这样导出 #这是图片大小设置，建议这样设置大小，默认太大不好看 fig=plt.figure(figsize=(3,2)) #fig=plt.figure(num=1,figsize=(3,2)) datax=[3,1,4,1,5] #plt.plot([3,1,4,1,5], ＂ks-＂, mec=＂w＂, mew=5, ms=20) #＂r-.d＂代表red-.p==红色-.-.-.◇菱形 #＂c-d＂ plt.plot(datax, ＂r-.d＂, mec=＂w＂, mew=5, ms=20) mpld3.show()
　　3.2 操作和效果图：
　　4 图和图例的交互式：
　　===============
　　4.1 代码：import matplotlib.pyplot as plt,mpld3 import numpy as np import pandas as pd #import mpld3  #这种导出注释掉，放在matplotlib的第一行那样导出 from mpld3 import plugins #数据 np.random.seed(9615) N = 100 #支持中文 df = pd.DataFrame((.1 * (np.random.random((N, 5)) - .5)).cumsum(0),                   columns=[＂a组＂, ＂b组＂, ＂c组＂, ＂d组＂, ＂e组＂],) #折线图和交互式组合 # plot line + confidence interval fig, ax = plt.subplots(figsize=(3,2)) #等价于下面2行 #fig = plt.figure(figsize=(3,2)) #ax = fig.add_subplot(1,1,1) #以上这样设置图片大小成功 ax.grid(True, alpha=0.3) for key, val in df.iteritems():     l, = ax.plot(val.index, val.values, label=key)     ax.fill_between(val.index,                     val.values * .5, val.values * 1.5,                     color=l.get_color(), alpha=.4) # define interactive legend handles, labels = ax.get_legend_handles_labels() # return lines and labels interactive_legend = plugins.InteractiveLegendPlugin(zip(handles,                                                          ax.collections),                                                      labels,                                                      alpha_unsel=0.5,                                                      alpha_over=1.5,                                                       start_visible=True) #图片和图例的交互式插件的联系设置 plugins.connect(fig, interactive_legend) ax.set_xlabel(＂x＂) ax.set_ylabel(＂y＂) #图的标题名和大小 ax.set_title(＂Interactive legend＂, size=20) mpld3.show()
　　4.2 图：
　　4.3 小插曲：
　　这里中文是支持的，这个和我曾经的matplotlib中文支持有点不一样，可以参考我的另外一篇文章，里面有提到。
　　《NetworkX：是一个简单、多样化、能快速生成网络图形的Python库》，这篇文章的第6点：中文显示，简单且一劳永逸。
　　5 散点图：
　　=======
　　5.1 代码：#Scatter图 import matplotlib.pyplot as plt,mpld3 import numpy as np #方法一，facecolor背景颜色 fig, ax = plt.subplots(subplot_kw=dict(facecolor=＂#EEEEEE＂),figsize=(3, 2)) #fig, ax = plt.subplots(subplot_kw=dict(facecolor=＂lightpink＂),figsize=(3, 2)) #fig, ax = plt.subplots()  #采用默认 #方法二 #fig = plt.figure(figsize=(3,2)) #ax = fig.add_subplot(1,1,1) #方法三 #fig, ax = plt.subplots(1,1, figsize=(3, 2))  N = 100 scatter = ax.scatter(np.random.normal(size=N),                      np.random.normal(size=N),                      c=np.random.random(size=N),                      s=1000 * np.random.random(size=N),                      alpha=0.3,                      cmap=plt.cm.jet) #网格设置 #ax.grid(color=＂white＂, linestyle=＂solid＂) #图标标题名 ax.set_title(＂Scatter Plot (with tooltips!)＂, size=20) labels = [＂point {0}＂.format(i + 1) for i in range(N)] #显示鼠标小提示 tooltip = mpld3.plugins.PointLabelTooltip(scatter, labels=labels) mpld3.plugins.connect(fig, tooltip) mpld3.show()
　　5.2 图：
　　6 面积曲线图：
　　==========
　　6.1 代码：import matplotlib.pyplot as plt, mpld3 import numpy as np x = np.linspace(0, 10, 200) data_obj = {＂x＂: x,             ＂y1＂: 2 * x + 1,             ＂y2＂: 3 * x + 1.2,             ＂mean＂: 0.5 * x * np.cos(2*x) + 2.5 * x + 1.1}  #fig, ax = plt.subplots()  #默认大小 fig, ax = plt.subplots(1,1,figsize=(3,2))   #填充两条线之间的颜色 ax.fill_between(＂x＂, ＂y1＂, ＂y2＂, color=＂yellow＂, data=data_obj) ax.plot(＂x＂, ＂mean＂, color=＂black＂, data=data_obj) mpld3.show()
　　6.2 图：
　　7 拖拽drag：
　　========
　　7.1 结合d3.js的JavaScript的代码：import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl import mpld3 from mpld3 import plugins, utils  class DragPlugin(plugins.PluginBase):     JAVASCRIPT = ＂＂＂     mpld3.register_plugin(＂drag＂, DragPlugin);     DragPlugin.prototype = Object.create(mpld3.Plugin.prototype);     DragPlugin.prototype.constructor = DragPlugin;     DragPlugin.prototype.requiredProps = [＂id＂];     DragPlugin.prototype.defaultProps = {}     function DragPlugin(fig, props){         mpld3.Plugin.call(this, fig, props);         mpld3.insert_css(＂#＂ + fig.figid + ＂ path.dragging＂,                          {＂fill-opacity＂: ＂1.0 !important＂,                           ＂stroke-opacity＂: ＂1.0 !important＂});     };      DragPlugin.prototype.draw = function(){         var obj = mpld3.get_element(this.props.id);          var drag = d3.drag()             .subject(function(d) { return {x:obj.ax.x(d[0]),                                           y:obj.ax.y(d[1])}; })             .on(＂start＂, dragstarted)             .on(＂drag＂, dragged)             .on(＂end＂, dragended);          obj.elements()            .data(obj.offsets)            .style(＂cursor＂, ＂default＂)            .call(drag);          function dragstarted(d) {           d3.event.sourceEvent.stopPropagation();           d3.select(this).classed(＂dragging＂, true);         }          function dragged(d, i) {           d[0] = obj.ax.x.invert(d3.event.x);           d[1] = obj.ax.y.invert(d3.event.y);           d3.select(this)             .attr(＂transform＂, ＂translate(＂ + [d3.event.x,d3.event.y] + ＂)＂);         }          function dragended(d) {           d3.select(this).classed(＂dragging＂, false);         }     }     ＂＂＂      def __init__(self, points):         if isinstance(points, mpl.lines.Line2D):             suffix = ＂pts＂         else:             suffix = None          self.dict_ = {＂type＂: ＂drag＂,                       ＂id＂: utils.get_id(points, suffix)}  fig, ax = plt.subplots(1,1,figsize=(3,2))   np.random.seed(0) points = ax.plot(np.random.normal(size=20),                  np.random.normal(size=20), ＂or＂, alpha=0.5,                  markersize=50, markeredgewidth=1) ax.set_title(＂Click and Drag＂, fontsize=18) plugins.connect(fig, DragPlugin(points[0])) mpld3.show()
　　7.2 效果图：
　　8 再附一张图，代码省略：
　　===自己整理并分享出来===
　　喜欢的人，请点赞、关注、评论、转发和收藏。