如何将3张d3.js图表排成一行

How to place 3 d3.js charts in a row

本文关键字：一行 3张 d3 js      更新时间：2023-09-26

我想把3个d3图表放在一行中，我试着用bootstrap fro html来做，但这并没有帮助我找到更好的方法来做这个

我当前的代码

<div class="row">
  <div class="span4" id="chart_1">23</div>
  <div class="span4" id="chart_2">45</div>
  <div class="span4" id="chart_3">34</div>
</div>

Fiddle：https://jsfiddle.net/r2qepmk0/3/

如果我将bootstrap类更改为col-xs-4，否则会将div放在行中，但不知何故，图表不会呈现。

js摆弄col-xs-4类https://jsfiddle.net/r2qepmk0/4/

我已经更新了您的https://jsfiddle.net/r2qepmk0/5/看一看

<div class="row">
    <div class="col-xs-4">
        <div class="span4" id="chart_1">23</div>
    </div>
    <div class="col-xs-4">
        <div class="span4" id="chart_2">45</div>
    </div>
    <div class="col-xs-4">
        <div class="span4" id="chart_3">34</div>
    </div>
</div>

以防万一，如果你想删除列之间的空白，你可以尝试这个链接

相关文章：