带有引导网格系统的 DC.js

Question

我正在编写一个使用 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。

Answer 1

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