我正在编写一个使用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.
答案 0 :(得分:0)
我发现了问题......引导代码实际上工作正常,问题