图解域变量说明(多个图) [英] Plotly domain variable explained (Multiple graphs)

问题描述

我正在查看以下教程 https://plot.ly/python/pie-charts/.

当一次绘制多个图形时，我无法弄清楚如何理解域变量.例如:

I cant figure out how to understand the domain variable when it comes to plotting multiple graphs at once. For instance:

        {
        'labels': ['1st', '2nd', '3rd', '4th', '5th'],
        'values': [38, 27, 18, 10, 7],
        'type': 'pie',
        'name': 'Starry Night',
        'marker': {'colors': ['rgb(56, 75, 126)',
                              'rgb(18, 36, 37)',
                              'rgb(34, 53, 101)',
                              'rgb(36, 55, 57)',
                              'rgb(6, 4, 4)']},
        'domain': {'x': [0, .48],
                   'y': [0, .49]},
        'hoverinfo':'label+percent+name',
        'textinfo':'none'
    },

将在左下角的坐标图中绘制饼图.

will plot a pie chart in the bottom left coordinates.

有人能解释领域变量(及其x和y分量)在实际中是如何工作的吗?

Can someone explain how the domain variable (and its x and y components) works in practice in plotly?

推荐答案

让我们只使用Javascript，因为它可以在此处执行.在Python和Javascript中，domain属性是相同的.

Let's just use Javascript because it can be executed here. The domain attribute is identical in Python and Javascript.

从文档:

domain

x(数组)

默认值:[0，1]

设置此饼图轨迹的水平域(以绘图分数表示). 每个对象都有下面列出的一个或多个键.

Sets the horizontal domain of this pie trace (in plot fraction). Each object has one or more of the keys listed below.

数组的第一个成员是开始位置，第二个成员是结束位置.

The first member of the array is the start position and the 2nd member is the end position.

对于x，0表示一直到左边，而1一直到右边.

For x 0 means all the way to the left and 1 is all the way to right.

对于y，0位于顶部，1位于底部.

For y 0 is top and 1 is bottom.

例如左上象限是x = [0, 0.5]和y = [0, 0.5]

如果您有多个图，例如在下面的示例中，有两个div，每个都有4个图，每个图的域指定了它占用的空间.在第一个示例中，每个图都获得可用空间的四分之一(即x和y分别设置为0到0.5和0.5到1).

If you have multiple plots, e.g. in the example below there are two divs with 4 plots each, the domain of each plot specifies which space is occupied by it. In the first example each plot gets a quarter of the available space (i.e. x and y are set to 0 to 0.5 resp. 0.5 to 1).

在第二个示例中，最后一个图的domain与其他域(0.25到0.75)重叠.

In the second example the domain of the last plot overlaps with the other domains (0.25 to 0.75).

在第三个示例中，最后一个图的domain较大，并且与其余图(0至0.75)重叠.

In the third example the domain of the last plot is bigger and overlaps with the rest (0 to 0.75).

简而言之，domain仅指定子图占据总图区域中的哪个空间.

In short, domain just specifies which space of the total plot area is occupied by the subplot.

var allValues = [
  [50, 30, 20],
  [45, 30, 25],
  [55, 25, 20],
  [50, 15, 35]
];

var data = [{
  values: allValues[0],
  type: 'pie',
  domain: {
    x: [0, .5],
    y: [0, .5]
  },
}, {
  values: allValues[1],
  type: 'pie',
  domain: {
    x: [0.5, 1],
    y: [0, .5]
  }
}, {
  values: allValues[2],
  type: 'pie',
  domain: {
    x: [0, .5],
    y: [.5, 1]
  }
}, {
  values: allValues[3],
  type: 'pie',
  domain: {
    x: [0.5, 1],
    y: [0.5, 1]
  },
}];



Plotly.newPlot('myDiv', data);
data[3].domain.x = [0.25, 0.75];
data[3].domain.y = [0.25, 0.75];

Plotly.newPlot('myDiv2', data);

data[3].domain.x = [0.0, 0.75];
data[3].domain.y = [0.0, 0.75];
Plotly.newPlot('myDiv3', data);

<div id='myDiv'></div>
<div id='myDiv2'></div>
<div id='myDiv3'></div>

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

这篇关于图解域变量说明(多个图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！