在D3中定位多個圖表

我很困惑如何定位多個圖表在D3中工作。最終目標是創建一個多圖儀表板。在D3中定位多個圖表

以this multiple chart example。我不明白爲什麼第二張圖表（右上角）選擇了這個位置。代碼中沒有任何內容（我可以看到）將第二個圖表定位在第一個圖表的右側。我會如何着手將第二張圖表定位在第一張圖表下方？

我是D3新手，我希望有人能指引我走向正確的方向。提前謝謝了！

2017-02-27 Sam Perry

默認情況下顯示的是SVGs inline。這就是爲什麼在你鏈接的代碼中，第一個SVG取得左上角，而第二個SVG取右上角。

檢查本演示中，既SVGs被附加到身體，第一個在左上角，並在其右側的第二個：

var svg = d3.select("body").selectAll("foo") 
 
    .data([1, 1]) 
 
    .enter() 
 
    .append("svg") 
 
    .attr("width", 100) 
 
    .attr("height", 100);

svg { 
 
    background-color: tan; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    }

<script src="https://d3js.org/d3.v4.min.js"></script>

如果你想定位SVG一個在另一個之上，使用display: block。

以下是僅用該更改的相同代碼。現在第二SVG被附加低於第一：

var svg = d3.select("body").selectAll("foo") 
 
    .data([1, 1]) 
 
    .enter() 
 
    .append("svg") 
 
    .attr("width", 100) 
 
    .attr("height", 100);

svg { 
 
    background-color: tan; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    }

<script src="https://d3js.org/d3.v4.min.js"></script>

來源

2017-02-27 12:00:37

-1

它的工作方式是CSS。該代碼在<body>中創建了2 <svg> DOM元素。這裏的jsfiddle example

你可以利用它來創建自己的多個圖表。還有其他技術可能（在一個單獨的<svg>元素中創建它們，並且自行處理包含單獨圖表的元素的<g>元素的轉換轉換）。以下是後者的示例：Scatterplot Matrix Brushing

來源

2017-02-27 10:55:45

在D3中定位多個圖表

回答

相關問題