Plotly域变量解释（多图）

Question

我正在看以下教程https://plot.ly/python/pie-charts/的'饼图子图'部分（页面上的最后一页）。

我无法弄清楚如何在一次绘制多个图的时候理解域变量。例如：

 { 
     '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' 
    }, 

将在左下角坐标中绘制一个饼图。

有人能解释一下域变量（及其x和y组件）是如何在实践中进行的吗？

Answer 1

让我们只使用Javascript，因为它可以在这里执行。 Python和Javascript中的域属性是相同的。

从documentation：

domain

x（阵列）

默认：[0，1]

设置此馅饼迹线的水平结构域（在情节分数）。 每个对象都有一个或多个下面列出的键。

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

对于x0意味着一路左侧和1是一路向右。

对于y0是顶部，1是底部。

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

---

如果您有多个地块，例如在下面的例子中，有两个div，每个有4个图，每个图的域指定哪个空间被它占据。在第一个例子中，每个绘图获得可用空间的四分之一（即，x和y被设置为0到0.5或0.5到1）。

在第二个示例中，最后一个plot的domain与其他域（0.25到0.75）重叠。

在第三个示例中，最后一个plot的domain更大并且与其余（0到0.75）重叠。

简而言之，domain只是指定总绘图区的哪个空间被子图占据。

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>