javascript - 矩形的Plotlyjs曲线

嘿，我正在使用plotlyjs来绘制弯曲正方形的面积图。我想要达到的最终结果是这样的：


我正在尝试使用plotlyjs库达到以上结果。我创建了3个正方形，每个正方形具有不同的颜色：绿色，黄色和红色。
每个正方形都是一个区域，如果一个点在绿色区域上，则表示它们的健康状况良好；如果在黄色区域上，则其健康状况为警告；如果在红色区域上，则其健康状况为危险，并且等等...

现在，我尝试使正方形具有弯曲的线，以使其像原始图片一样显示为弧形。

我正在寻找解决问题的方法，我想但要使用“路径”而不是“正方形”形状，但是如何才能相应地绘制圆弧呢？

如果plotlyjs的专家能够为我提供帮助，我将感到非常高兴，
提前致谢。

到目前为止，我已经通过一个示例实现了这一点：

var d3 = Plotly.d3

function normal_array( mean, stddev, size ){
    var arr = new Array(size), i;
    // from http://bl.ocks.org/nrabinowitz/2034281
    var generator = (function() {
        return d3.random.normal(mean, stddev);
    }());

    for( i=0; i< arr.length; i++ ){
        arr[i] = generator();
    }
    return arr;
}

var x0 = normal_array(1, 0, 300);
var y0 = normal_array(1, 0, 300);

var x1 = normal_array(1, 0, 200);
var y1 = normal_array(1, 0, 200)

var x2 = normal_array(1, 0, 200);
var y2 = normal_array(1, 0, 200);


var data = [
    {
        x: x0,
        y: y0,
        mode: 'markers'
    }, {
        x: x1,
        y: y1,
        mode: 'markers'
    }, {
        x: x2,
        y: y2,
        mode: 'markers'
    }, {
        x: x1,
        y: y0,
        mode: 'markers'
    }
];

var layout = {
    shapes: [
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0,
            y0: 0,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'green',
            line: {
                color: 'green'
            }
        },
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0.5,
            y0: 0.5,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'orange',
            line: {
                color: 'orange'
            }
        },
        {
            type: 'square',
            xref: 'x',
            yref: 'y',
            x0: 0.75,
            y0: 0.75,
            x1: 1,
            y1: 1,
            opacity: 0.7,
            fillcolor: 'red',
            line: {
                color: 'red'
            }
        }

    ],
    showlegend: false
}

Plotly.newPlot('myDiv', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" style="width: 100%; height: 100%;">

编辑：
我已经成功达到以下结果，svg颠倒了，我不知道如何朝正确的方向旋转。
http://codepen.io/Barak/pen/apYvjW

最佳答案

您可以尝试以下方法：


通过layout.shapes添加3种形状，绿色矩形，黄色和红色圆圈（通过代码段中的for循环完成）
通过layer.shapes.layer: 'below'确保形状在背景中
通过layout.x/yaxis.showgrid: false隐藏网格
将标记添加为散点图

var myDiv = document.getElementById('myDiv');
var types = ['square', 'circle', 'circle'];
var pos = [1, 0.7, 0.4];
var colors = ['green', 'yellow', 'red'];
var layout = {
    height: 400,
    width: 400,
    xaxis: {range: [0, 1], showgrid: false},
    yaxis: {range: [0, 1], showgrid: false},
    shapes: [],
};
for (var i = 0; i < 3; i +=1) {
    layout.shapes.push({
        type: types[i],
        x0: 1 - pos[i],
        y0: 1 - pos[i],
        x1: 1 + pos[i],
        y1: 1 + pos[i],
        fillcolor: colors[i],
        line: {
            color: colors[i]
        },
        layer: 'below'
    })
}

var data = [{
    type: 'scatter',
    x: [0.5],
    y: [0.3],
    mode: "markers",
    marker: {
        color: 'black',
        size: 10},
    }]
Plotly.plot(myDiv, data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>