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-.div==红色-.-.-.◇菱形 #"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 再附一张图，代码省略：
===自己整理并分享出来===
喜欢的人，请点赞、关注、评论、转发和收藏。
