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>