将形状（路径）添加到三元图

Question

我想在 scatterternary 中添加一个形状（三角形）以突出显示用户缩放到的位置。我可以捕获缩放后的坐标，但无法生成显示在三元图上的形状。

问题是我只能在 x,y 坐标中设置形状坐标，我无法匹配 ternary 坐标。我相信由于边距也存在偏移问题。

有什么建议吗？

这是情节本身的一个例子：

var ternaryTraceZoomLegend = {
        name: 'Ternary',
        type: 'scatterternary',
        mode: 'markers',
        a: [0,1],
        b: [0,1],
        c: [0,1],
        aaxis: 't2',
    };
var layout = {
    //force specific plot size
    autosize: false,
    width: 800,
    height: 800,
    paper_bgcolor: '#fff',
    ternary: {
        sum: 100,
        aaxis: makeAxis('A', 0),
        baxis: makeAxis('B', 0),
        caxis: makeAxis('Both', 0),
        bgcolor: '#fff'
    },

   ////
   //// Here is where I try to add a shape:
    shapes: [{
        type: 'path',
        yref: 'a',
        path: 'M .1 .1 L .1 .3 L .4 .1 Z',
        fillcolor: 'rgba(44, 160, 101, 0.5)',
        line: {
            color: 'rgb(44, 160, 101)'
        }
    }]
Plotly.plot('ternary-graph', [ternaryTraceZoomLegend], layout);

Answer 1

我想出了一个解决办法，以防其他人想根据笛卡尔坐标计算 (http://mathworld.wolfram.com/TernaryDiagram.html) 为他们的绘图显示三角形缩放插图：

myPlot.on('plotly_relayout',
        function(eventdata){
            //console.log(eventdata);
            // if zooming then change shape size
            if(eventdata['ternary.baxis.min'] !== undefined){
                var aMin = (eventdata['ternary.aaxis.min'] / 100);
                var cMin = (eventdata['ternary.baxis.min'] / 100);
                var bMin = (eventdata['ternary.caxis.min'] / 100);
                var whRatio = Math.sqrt(3) / 2;

                var xMin = 0.0; var xMax = 0.2;
                var yMin = 0.8; var yMax = 0.94;

                var a1 = 1 - (bMin + cMin);
                var a2 = aMin;
                var a3 = aMin;

                var b1 = bMin;
                var b2 = 1 - (aMin + cMin);
                var b3 = bMin;

                var c1 = cMin;
                var c2 = cMin;
                var c3 = 1 - (aMin + bMin);

                var x1 = 0.5 * a1 + b1;
                var y1 = whRatio * a1;

                var x2 = 0.5 * a3 + b3;
                var y2 = whRatio * a2;

                var x3 = 0.5 * a2 + b2;
                var y3 = whRatio * a3;

                x1 = x1 * 0.2;
                x2 = x2 * 0.2;
                x3 = x3 * 0.2;

                y1 = (y1 * 0.162) + yMin;
                y2 = (y2 * 0.162) + yMin;
                y3 = (y3 * 0.162) + yMin;
                var triangleColor = "rgba(0,0,0,0.5)";
                //now stop changing if the zoomed triangle is too small
                if(Math.abs(x1-x2) < 0.004){
                    return;
                } else if(Math.abs(x1-x2) != 0.1){
                    triangleColor = "rgba(187,11,39,0.5)";
                }

                var updatedShapes = { shapes:
                    [{
                        type: 'path',
                        yref: 'y0',
                        xref: 'x0',
                        path: 'M ' + xMin + " " + yMin + ' L ' + xMax / 2 + " " + yMax + ' L ' + xMax + " " + yMin + ' Z',
                        fillcolor: '#fff',
                        line: {
                            color: '#000'
                        }
                    },{
                        type: 'path',
                        yref: 'y1',
                        xref: 'x1',
                        path: 'M ' + x1 + " " + y1 + ' L ' + x2 + " " + y2 + ' L ' + x3 + " " + y3 + ' Z',
                        fillcolor: triangleColor,
                        line: {
                            width: 0,
                            //color: '#bb0b27'
                        }
                    }]
                };
                Plotly.relayout('ternary-graph', updatedShapes);
            }
        }
    );

将形状（路径）添加到三元图

Add shape (path) to ternary plot

javascript

plotly

plotly.js