dc.js 和 bootstrap 网格，chrome 和 firefox 之间的图表宽度大小不同

Question

我正在尝试实现一个简单的仪表板，但我遇到了 firefox 和 chrome 之间的宽度问题（我在这方面经验不足）。在 Firefox 上一切正常，但在 chrome 上它完全被拉伸了。

这是我在html中选择的部分：

<body class="application">

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="./">Dashboard with &hearts;</a>
      </div>
    </div>
  </div>

  <div class="container-fluid">

    <div class="row">

      <div class="col-sm-12">
        <div class="row">

          <!-- Test Chart -->
          <div class="col-sm-12">
            <div class="chart-wrapper">
              <div class="chart-title">
                Test Chart
              </div>
              <div class="chart-stage">
                <!--<div id="chart"></div>-->
                <div class="row">
                  <div id="chart"></div>
                </div>

                <div class="row">
                  <div id="volume-chart"></div>
                  <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>

还有 javascript 一个：

queue()
    .defer(d3.json, "/data")
    .await(makeGraphs);


function makeGraphs(error, recordsJson) {

    // Clean data
    var records = recordsJson;

    var dateFormat = d3.time.format("%Y-%m-%d %H:%M");
    console.log(Object.prototype.toString.call(records[0].date));

    records.forEach(function(d) {
        d.date = new Date(d.date);
    });

    // Slice data to ease debugging
    records = records.slice(0, 2000);

    // Crossfilter instance
    ndx = crossfilter(records);

    // Define Dimensions
    var dateDim = ndx.dimension(function(d) { return d.date; });
    var prodPowDim = ndx.dimension(function(d) { return d.prodPow; });
    var consPowDim = ndx.dimension(function(d) { return d.consPow; });

    // Define Groups
    var consByDate = dateDim.group().reduceSum(function (d) { return d.cons; });
    var prodByDate = dateDim.group().reduceSum(function (d) { return d.prod; });
    // Group by total volume within date dimension
    var volumeByDateDim = dateDim.group().reduceSum(function (d) { return d.cons; });


    // Min and max dates to be used in the charts
    var minDate = dateDim.bottom(1)[0]["date"];
    var maxDate = dateDim.top(1)[0]["date"];

    // Charts instance
    var chart = dc.lineChart("#chart");
    var volumeChart = dc.barChart('#volume-chart');


    chart
        .renderArea(true)
        /* Make the chart as big as the bootstrap grid by not setting ".width(960)" */
        .height(350)
        .transitionDuration(1000)
        .margins({top: 30, right: 50, bottom: 25, left: 40})
        .dimension(dateDim)
        /* Grouped data to represent and label to use in the legend */
        .group(consByDate, "Consumed")
        /* Function to access grouped-data values in the chart */
        .valueAccessor(function (d) {
            return d.value;
        })
        /* x-axis range */
        .x(d3.time.scale().domain([minDate, maxDate]))
        /* Auto-adjust y-axis */
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
        /* When on, you can't visualize values, when off you can filter data */
        .brushOn(false)
        /* Add another line to the chart; pass (i) group, (ii) legend label and (iii) value accessor */
        .stack(prodByDate, "Produced", function(d) { return d.value; })
        /* Range chart to link the brush extent of the range with the zoom focus of the current chart. */
        .rangeChart(volumeChart)
        /* TODO test them */
        //.mouseZoomable(true)
        //.round(d3.time.month.round)
        //.xUnits(d3.time.months)
        //.xAxisLabel("Year")
        //.yAxis().ticks(4)
        ;

    volumeChart//.width(990)
        .height(60)
        .margins({top: 0, right: 50, bottom: 20, left: 40})
        .dimension(dateDim)
        .group(volumeByDateDim)
        .centerBar(true)
        .gap(1)
        .x(d3.time.scale().domain([minDate, maxDate]))
        //.round(d3.time.month.round)
        .alwaysUseRounding(true)
        //.xUnits(d3.time.months);


    // Render all graphs
    dc.renderAll();
};

在图表自定义中我排除了 .width 因为我注意到 firefox 以这种方式使用整个 bootstrap col-sm-12 并在那里拉伸图表...... 现在 chrome 这没有发生，我不确定如何使这种行为在其他浏览器中持续存在......我尝试的所有事情都失败了，我唯一可以使用的选择是使用看起来很糟糕的固定宽度在较小的屏幕上...

在此先感谢您的帮助

Answer 1

好吧，因为我没有得到任何更好的答案，我将 post 我在与 viewBox 和类似选项苦苦挣扎后找到的 "quick&dirty" 解决方案。

就用这个：

<div id="chart" style="width:100%;"></div>

因为 index.html 成功了，现在图表显示在 firefox、chrome 和 edge 的页面全宽上。

我也用过这个：

<div class="row" style="width:100%;">

为 " 部分之前的行避免显示水平条。

唯一剩下的问题是这不是很灵敏，如果我调整浏览器页面的大小，图表将保持相同的大小并且不会出现水平条...无论如何我可以忍受现在，问题解决了。

dc.js 和 bootstrap 网格，chrome 和 firefox 之间的图表宽度大小不同

dc.js and bootstrap grid, chart width sizing different between chrome and firefox

google-chrome

d3.js

twitter-bootstrap

dc.js