可以在 Web UI 上使用 Plotly JS 进行这种渲染吗？

Question

在我们的项目中，我们被要求使用 3D 图表渲染一些数据。 有没有办法使用 Plotly JS 获得这种结果或者最接近的解决方案是什么？ 在每个轴上，最小值和最大值是动态的。因此，黄色和白色区域设置在这些最小/最大值上。

这是我们用于测试的代码。 感谢您的帮助。

     var x = [
      -0.1385544005121483, -1.2903578543319871, 0.17137660173358127, 0.10363212036839448, 0.14427880918750655,
      0.11548740460730217, 0.22218496275747135, 0.2729933237813615, 0.21202329055269334, 0.2729933237813615,
      0.10532573240252416, 0.19678078224552634, 0.09008322409535713, 0.4254184068530317, -1.0531048989421699,
      -0.5958296497271591, -1.20552998201384
    ],
    y = [
      -0.8866299263650257, -2.1309945453337336, 0.2788712391361398, 0.31746399296068173, 0.2840169396460787,
      0.29173549041098706, 0.06275181771870514, 0.5490205159079331, 0.10906312230815542, 0.363775297550132,
      0.363775297550132, -0.07618209604964572, 0.41008660213958226, 0.31746399296068173, -0.8866299263650257,
      -1.58129949520678, 4.747912132018092
    ],
    z = [
      -0.8049677311078224, -1.5338149509990897, 0.16386189219291153, 0.11046183421570573, 0.17318571183972523,
      0.10029039460099985, 0.11046183421570573, 0.17149047190394093, -0.01159544116076469, 0.20200479074805852,
      0.27829058785835253, 0.5224051386112933, -0.1183955571151763, 0.0036617182612941122, -0.6523961368872343,
      -1.1482538181041453, 1.2293201918333512
    ];

  var a = [3.252903697832515],
    b = [2.355161394896494],
    c = [1.7887493706421738];

  var d = [3.252903697832515, 3.252903697832515, 3.252903697832515, 3.252903697832515, 32.5908],
    e = [2.355161394896494, 2.355161394896494, -0.12679999999999936, 2.355161394896494, 2.355161394896494],
    f = [-6.386900000000001, 1.7887493706421738, 1.7887493706421738, 1.7887493706421738, 1.7887493706421738];
  
  var data = [
    {
      x: x,
      y: y,
      z: z,
      marker: { 
        size: 10,
        opacity: 0.7, 
        color: z,
        line: {
          color: 'rgb(204, 204, 204)',
          width: 1
        },
          opacity: 1
      },
      mode: "markers",
      type: "scatter3d"
    },
    {
      x: a,
      y: b,
      z: c,
      marker: { 
        size: 10,
        opacity: 0.7, 
        color: c,
        line: {
          color: 'rgb(204, 204, 204)',
          width: 1
        },
          opacity: 1
      },
      mode: "markers",
      type: "scatter3d"
    },
    {
      x: d,
      y: e,
      z: f,
      marker: { 
        size: 10,
        opacity: 0.7, 
        color: f,
        line: {
          color: '#000',
          width: 2
        },
          opacity: 1
      },
      mode: "markers",
      type: "scatter3d"
    }
  ];
  var layout = {
    width: 1000,
    height: 1000,
    showlegend: true,
    title: {
      font: {
        size: 15
      },
      text: "Graphe de Youden - Pays"
    },
    scene: {
      xaxis: {
        layer: "below traces",
        dtick: 6.5606,
        tick0: -6.772799999999998,
        range: [-6.772799999999998, 32.5908],
        title: {
          text: "themA CTR-L3 te",
          
        },
        titlefont: {
          size: 12,
        },
        showbackground: false,
        zerolinecolor: "rgb(255, 255, 255)",
        zeroline: true,
        zerolinewidth: 20,
        gridwidth: 2,
        zeroline: false,
      },
      yaxis: {
        
        dtick: 4.3186,
        tick0: -0.12679999999999936,
        range: [-0.12679999999999936, 25.7848],
        title: {
          text: "niveau 2"
        },
        titlefont: {
          size: 12
        },
        showbackground: false,
        gridwidth: 2,
        type: "linear"
      },
      zaxis: {       
        zeroline: false,
        dtick: 6.5543,
        tick0: -6.386900000000001,
        range: [-6.386900000000001, 32.938900000000004],
        title: {
          text: "niveau 1"
        },
        gridwidth: 2,
        gridcolor: "gray",
        type: "linear",
        zeroline: false,
      },
      aspectmode: "cube",
      aspectratio: {
        x: 1,
        y: 1,
        z: 1
      },
      projection: {
        x: 5,
        y: 5,
        z: 5
      },
      camera: {
        up: {
          x: 0,
          y: 0,
          z: 1
        },
        center: {
          x: 0,
          y: 0,
          z: 0
        },
        eye: {
          x: 2,
          y: 1.5,
          z: 0.15
        }
      }
    }
  };
  Plotly.newPlot("myDiv", data, layout);

Answer 1

最后我的解决方案是：

var cline = "rgb(255, 128, 54)";
var xmax = 0.631;
var xmin = 0.158;
var ymax = 0.963;
var ymin = 0.091;
var zmax = 0.241;
var zmin = 0.481;
traceline1 = {
  type: "scatter3d",
  mode: "lines+markers",
  showlegend: false,
  x: [xmin, xmin, xmax, xmax, xmin],
  y: [ymin, ymax, ymax, ymin, ymin],
  z: [zmax, zmax, zmax, zmax, zmax],
  line: {
    width: 6,
    color: cline,
    //colorscale: "Viridis",
  },
  marker: {
    size: 3.5,
    color: "rgb(0, 255, 64)",
    //colorscale: "Greens",
    cmin: -20,
    cmax: 50,
  },
};
//Build the different lines
traceline2 = {...}
var data = [  trace2,  traceline1,  traceline2,  traceline3,  traceline4,  traceline5, traceline6
];
var gd = document.getElementById("graphDiv");
Plotly.newPlot(gd, data, layout,{responsive:true});