带引导网格系统的DC.js

时间:2015-06-16 18:45:50

标签: twitter-bootstrap dc.js

我正在编写一个使用bootstrap和DC.js的库。引导网格由库自动生成。我正在尝试创建一个具有标题行的网格,然后创建一个包含两列的行:第一列有两行,每个插槽用于一个图表。对于第三个图表,第二列只有一行。这是自动生成的javascript代码:

container = d3.select(\"body\")
  .append(\"div\")
  .attr(\"class\",  \"container\")
  .attr(\"style\", \"font: 12px sans-serif;\");

// Add a row for the dashboard title
var title = container.append(\"div\").attr(\"class\", \"row\");
title
  .attr(\"class\", \"col-sm-12\")
  .attr(\"id\", \"title\")
  .attr(\"align\", \"center\");

title.append(\"h4\").text(\"Complex scene\");

var g1_0 = container.append(\"div\").attr(\"class\", \"row\");
var g1_0_0 = g1_0.append(\"div\").attr(\"class\", \"col-sm-6\");
var g1_0_1 = g1_0.append(\"div\").attr(\"class\", \"col-sm-6\");
g1_0_1.attr(\"id\", \"DateVolumeChart\");

var g2_0 = g1_0_0.append(\"div\").attr(\"class\", \"row\");
var g2_0_0 = g2_0.append(\"div\").attr(\"class\", \"col-sm-6\");
g2_0_0.attr(\"id\", \"DateOpenChart\");

var g2_1 = g1_0_0.append(\"div\").attr(\"class\", \"row\");
var g2_1_0 = g2_1.append(\"div\").attr(\"class\", \"col-sm-6\");
g2_1_0.attr(\"id\", \"DateCloseChart\");

虽然屏幕上显示了三个图表,但我原本预计左边的两个图表将与右边的图表对齐,整个图表集合高度为400:左边图表的高度是200,右边图表的高度是400。

[我想张贴图片,但没有足够的声誉]

而不是图像高度为400,左边的第一个图表与右边的图表对齐。但是左边的第二个图表在右边的图表结束后(400)开始,而不是在左边的图表(200)之后,因此总高度为600.

1 个答案:

答案 0 :(得分:0)

我发现了问题......引导代码实际上工作正常,问题