javascript - Plotlyjs 方形曲线

Question

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

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

现在我正在尝试使正方形具有曲线，以便它会像原始图片中那样显示为弧形。

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

如果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

Answer 1

您可以尝试以下方法:

• 通过 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>