Plotlyドメイン変数が説明されています（複数のグラフ）

Question

私は、次のチュートリアルhttps://plot.ly/python/pie-charts/の「円グラフのサブプロット」セクション（最後の1ページ）を見ています。

複数のグラフを一度にプロットする際にドメイン変数を理解する方法がわかりません。たとえば、

 { 
     '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]

このパイトレースの水平領域を設定し（プロット画分中）。 各オブジェクトには、以下に示す1つ以上のキーがあります。

配列の最初のメンバーは開始位置で、2番目のメンバーは終了位置です。

x0は、すべて左を意味し、1はすべて正しい方法です。

y0がトップであり、1がボトムである。

あなたが複数のプロットを持っている場合は、左上の象限は、例えば、x = [0, 0.5]とy = [0, 0.5]

---

だろう下の例ではそれぞれ2つのプロットがある2つのプロットがあり、各プロットのドメインはそれが占めるスペースを指定します。最初の例では、各プロットは利用可能な空間の4分の1を取得します（つまり、xとyは0から0.5、0.5から1に設定されます）。

最後のプロットのdomainは、他のドメイン（0.25~0.75）と重複しています。

第3の例では、最後のプロットの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>