使用 nvd3.js 引导布局答案

【问题标题】：bootstrap layout with nvd3.js使用 nvd3.js 引导布局
【发布时间】：2014-08-09 07:28:42
【问题描述】：

我最近开始研究 d3.js。虽然我在 html/css/javascript 中很新；我目前的目标是使用 nvd3.js（为了更容易的图表）和引导程序作为布局组件来构建一个简单的（静态）仪表板。

我从 nvd3.js 示例“pie.html”开始，并尝试使用引导网格系统将图形排列在一行中。我仅使用 d3noob.org 示例使其与 d3 一起使用。可悲的是，它不适用于 nvd3。

我在下面粘贴了完整的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="nvd3/src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

</style>

<div class="row">
    <div class="span5" id="area1"></div> 
    <div class="span2"> This is some random text which should be in the middle of these two charts </div>
    <div class="span5" id="area2"></div> 
</div>

<body class='with-3d-shadow with-transitions'>
<!-- load the libraries -->    
<script src="nvd3/lib/d3.v3.js"></script>
<script src="nvd3/nv.d3.js"></script>
<script src="nvd3/src/models/pie.js"></script>
<script src="nvd3/src/utils.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script>

  var testdata = [
    { 
      key: "One",
      y: 5
    },
    { 
      key: "Two",
      y: 2
    },
    { 
      key: "Three",
      y: 9
    },
    { 
      key: "Four",
      y: 7
    },
    { 
      key: "Five",
      y: 4
    },
    {
        key: "Six",
        y: 3
    }
  ];


nv.addGraph(function() {
    var width = nv.utils.windowSize().width - 40,
        height = nv.utils.windowSize().height / 2 - 40;

    var chart = nv.models.pie()
        .values(function(d) { return d })
        .width(width)
        .height(height);

    d3.select("#area1").append("svg")
        .datum([testdata])
      .transition().duration(1200)
        .attr('width', width)
        .attr('height', height)
        .call(chart);

    return chart;
});

nv.addGraph(function() {
    var width = nv.utils.windowSize().width - 40,
        height = nv.utils.windowSize().height / 2 - 40;

    var chart = nv.models.pie()
        .values(function(d) { return d })
        .width(width)
        .height(height)
        .donut(true);

    d3.select("#area2").append("svg")
        .datum([testdata])
      .transition().duration(1200)
        .attr('width', width)
        .attr('height', height)
        .call(chart);

    return chart;
});

</script>
</body>

它的样子：

d3+bootstrap 示例：https://gist.github.com/d3noob/6a3b59149cf3ebdb3fc4

应该是什么样子的：

【问题讨论】：

你见过this question吗？
将 div 添加到
你可能想要创建两个 div，显示为 inline-block。然后将每个 nvd3js 附加到它们。

标签： javascript twitter-bootstrap d3.js nvd3.js

【解决方案1】：

“spanX”类在 Bootstrap 3.x 中已过时

使用“col-xx-x”类使其工作。

【讨论】：