Javascript 使用nvd3.js的引导布局_Javascript_Twitter Bootstrap_D3.js_Nvd3.js

Javascript 使用nvd3.js的引导布局

javascript twitter-bootstrap d3.js

Javascript 使用nvd3.js的引导布局,javascript,twitter-bootstrap,d3.js,nvd3.js,Javascript,Twitter Bootstrap,D3.js,Nvd3.js,我最近开始研究d3.js。虽然我在html/css/javascript方面还很新；我目前的目标是使用nvd3.js（用于更简单的图形）和引导作为布局组件来构建一个简单的（静态）仪表板我从nvd3.js示例“pie.html”开始，尝试使用引导网格系统将图形排成一行。我只使用了d3noob.org的例子就可以使用d3。遗憾的是，它不能与nvd3一起工作我将完整代码粘贴到下面： <!DOCTYPE html> <meta charset="utf-8"> <lin

我最近开始研究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>


身体{
溢出y：滚动；
}
正文{
字体：12px无衬线；
}
这是一些应该在这两个图表中间的随机文本。
var testdata=[
{ 
钥匙：“一个”，
y:5
},
{ 
钥匙：“两个”，
y:2
},
{ 
键：“三”，
y:9
},
{ 
键：“四”，
y:7
},
{ 
键：“五”，
y:4
},
{
键：“六”，
y:3
}
];
nv.addGraph（函数（）{
var width=nv.utils.WindowsSize（）.width-40，
高度=nv.utils.windowSize（）.height/2-40；
var chart=nv.models.pie（）
.values（函数（d）{返回d}）
.宽度（宽度）
.高度（高度）；
d3.选择（“区域1”）。追加（“svg”）
.数据（[testdata]）
.transition（）.持续时间（1200）
.attr（'width'，width）
.attr（'height'，height）
.电话（图表）；
收益表；
});
nv.addGraph（函数（）{
var width=nv.utils.WindowsSize（）.width-40，
高度=nv.utils.windowSize（）.height/2-40；
var chart=nv.models.pie（）
.values（函数（d）{返回d}）
.宽度（宽度）
.高度（高度）
.甜甜圈（正确）；
d3.选择（“区域2”）。追加（“svg”）
.数据（[testdata]）
.transition（）.持续时间（1200）
.attr（'width'，width）
.attr（'height'，height）
.电话（图表）；
收益表；
});

它看起来像什么：

d3+引导示例：

它应该是什么样子的：

类“spanX”在Bootstrap3.x中已经过时了

使用类“col-xx-x”可以使它工作。

您看到了吗？向节中添加div不起作用（它在一行中，带边框，但缺少图形）。正如我在问题中提到的，我想在其网格系统中使用bootstrap.css。您可能想创建两个div，显示内联块。然后将每个nvd3js附加到它们。