如何使我的所有圖形顯示在html頁面上？

Question

我正在使用d3.js在一個html頁面上排列4個圖形。 問題是，盡管我的所有圖形都以某種方式顯示，但它們並沒有像應做的那樣相互作用，或者它們與軸重疊（如線形圖和條形圖）。 就朝陽圖而言，當我單擊它時，它消失了。 svg命名錯誤嗎？

<div>
  <svg width="800" height="500" id="line-chart"></svg>
  <svg width="500" height="400" id="map-chart"></svg>
</div>
<div>
  <svg width="900" height="400" id="bar-chart"></svg>
  <svg width="500" height="500" id="sunburst-chart"></svg>
</div>

我這樣設置頁面，然后為每個圖表命名：svg，svg2，svg3，svg4–，然后引用上面的svg ID（＃line-chart）。 不確定是否以正確的方式完成了任務。

預期的結果應該是所有圖形都在一個象限中並且是單獨交互的。 地圖也應該顯示出來。

Answer 1

我會嘗試使用flexbox添加所需的間距。 根據您的代碼段，您沒有CSS即可告訴圖形實際的位置，因此它們僅以默認設置顯示。

試試這個，對我來說把它們變成網格很有用。

.flexOnIt {
     display: flex;
     justify-content: center;
}

</style>
<body>
<div class="flexOnIt">
     <svg width="800" height="500" id="line-chart"></svg>
     <svg width="500" height="400" id="map-chart"></svg>
</div>

<div class="flexOnIt">
     <svg width="900" height="400" id="bar-chart"></svg>
     <svg width="500" height="500" id="sunburst-chart"></svg>
</div>

這是我收到的錯誤（有關此原因的注釋，請參閱注釋）

如何使我的所有圖形顯示在html頁面上？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-07-31 14:46:30

如何使我的所有圖形顯示在html頁面上？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-07-31 14:46:30

解決方案1
0 已采納 2019-07-31 14:46:30