在Plotly中的二维非结构化四边形网格上绘制面数据

Question

我正在尝试在Plotly中的2D非结构化四边形网格上绘制面部数据。到目前为止，我所能确定的只是这种解决方法（有效，但是在有大量数据时非常慢）。下面在Python和JavaScript中都提供了我尝试的最小工作示例。

我的问题是：

1. 是否有更好的方法来创建2D四边形网格，类似于三角形mesh3d的工作方式，并且比Scatter对象实现更快？
2. 有没有一种方法可以使填充区域激活悬停？即当我将鼠标悬停在四边形的填充区域（而不是顶点）上时，可以显示悬停文本吗？
3. 可以将自定义颜色条添加到Plotly图中吗？

我愿意使用Python或JavaScript回答问题，并且偏爱Python。

Python代码

（可以在Jupyter笔记本中运行）

# CREATE INPUT DATA FOR MWE
import numpy
vert_x = numpy.array([0.6, 0.5, 0. , 1. , 0.3, 0.5,
                      0.7, 0.8, 0.3, 0.5, 0.6])
vert_y = numpy.array([0. , 1. , 0.5, 0.6, 0.8, 0.5,
                      0.8, 0.3, 0.3, 0.7, 0.4])
cells = numpy.array([[ 1,  4,  9,  6],
                     [ 4,  2,  5,  9],
                     [ 6,  9,  5,  3],
                     [ 0,  7, 10,  8],
                     [ 7,  3,  5, 10],
                     [ 8, 10,  5,  2]])
z_data = numpy.array([0.1,0.2,0.3,0.4,0.5,0.6])

# make face colors from z_data
colors = []
for z in z_data:
    red = int((z/numpy.max(z_data))*255)
    colors.append('rgb({},0,0)'.format(red))

# MAKE PLOT
import plotly.offline as py
py.init_notebook_mode(connected=True)
import plotly.graph_objs as go

# create list of Scatter objects for quadrilaterals
quads = []
numCells = cells.shape[0]
for c in range(numCells):
    quads.append(
        go.Scatter(
            x = [vert_x[cells[c,0]],
                 vert_x[cells[c,1]],
                 vert_x[cells[c,2]],
                 vert_x[cells[c,3]],
                 vert_x[cells[c,0]]],
            y = [vert_y[cells[c,0]],
                 vert_y[cells[c,1]],
                 vert_y[cells[c,2]],
                 vert_y[cells[c,3]],
                 vert_y[cells[c,0]]],
            fill = 'tozeroy',
            mode = 'none',
            name = '',
            fillcolor=colors[c],
            hoveron = 'fill',
            text = "z = {}".format(z_data[c]),
        )
    )

layout = go.Layout(
    width=400,
    height=400,
    showlegend = False,
    hovermode = 'closest',
)

fig = go.Figure(data=quads, layout=layout)
py.iplot(fig)

自动生成的绘图输出

window.PLOTLYENV = window.PLOTLYENV || {};
window.PLOTLYENV.BASE_URL = "https://plot.ly";
Plotly.newPlot("quadMWE", [{
  "type": "scatter",
  "x": [0.5, 0.3, 0.5, 0.7, 0.5],
  "y": [1.0, 0.8, 0.7, 0.8, 1.0],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(42,0,0)",
  "hoveron": "fill",
  "text": "z = 0.1"
}, {
  "type": "scatter",
  "x": [0.3, 0.0, 0.5, 0.5, 0.3],
  "y": [0.8, 0.5, 0.5, 0.7, 0.8],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(85,0,0)",
  "hoveron": "fill",
  "text": "z = 0.2"
}, {
  "type": "scatter",
  "x": [0.7, 0.5, 0.5, 1.0, 0.7],
  "y": [0.8, 0.7, 0.5, 0.6, 0.8],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(127,0,0)",
  "hoveron": "fill",
  "text": "z = 0.3"
}, {
  "type": "scatter",
  "x": [0.6, 0.8, 0.6, 0.3, 0.6],
  "y": [0.0, 0.3, 0.4, 0.3, 0.0],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(170,0,0)",
  "hoveron": "fill",
  "text": "z = 0.4"
}, {
  "type": "scatter",
  "x": [0.8, 1.0, 0.5, 0.6, 0.8],
  "y": [0.3, 0.6, 0.5, 0.4, 0.3],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(212,0,0)",
  "hoveron": "fill",
  "text": "z = 0.5"
}, {
  "type": "scatter",
  "x": [0.3, 0.6, 0.5, 0.0, 0.3],
  "y": [0.3, 0.4, 0.5, 0.5, 0.3],
  "fill": "tozeroy",
  "mode": "none",
  "name": "",
  "fillcolor": "rgb(255,0,0)",
  "hoveron": "fill",
  "text": "z = 0.6"
}], {
  "width": 400,
  "height": 400,
  "showlegend": false,
  "hovermode": "closest"
}, {
  "showLink": false,
  "linkText": "Export to plot.ly"
})

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="quadMWE" style="height: 400px; width: 400px;" class="plotly-graph-div"></div>