Добавить фигуру (путь) к троичному графику

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);
            }
        }
    );