在 D3 中定位多个图表答案

【问题标题】：Position Multiple Charts in D3在 D3 中定位多个图表
【发布时间】：2017-02-27 20:06:36
【问题描述】：

我对如何在 D3 中定位多个图表感到困惑。最终目标是创建一个多图表仪表板。

以this multiple chart example.我不明白为什么第二张图表（右上角）选择了那个位置。代码中没有任何内容（我可以看到）将第二个图表定位在第一个图表的右侧。我将如何将第二个图表定位在第一个图表下方？

我是 D3 的新手，我希望有人能指出我正确的方向。非常感谢！

【问题讨论】：

【解决方案1】：

SVG 默认显示为inline。这就是为什么在您链接的代码中，第一个 SVG 位于左上角，而第二个位于右侧。

查看这个演示，两个 SVG 都附加到正文中，第一个在左上角，第二个在右侧：

var svg = d3.select("body").selectAll("foo")
  .data([1, 1])
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100);

svg {
  background-color: tan;
  margin-right: 10px;
  margin-bottom: 10px;
  }

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

如果您想将 SVG 放在一个上方，请使用 display: block。

这里是相同的代码，只是进行了更改。现在第二个 SVG 附加在第一个 SVG 下方：

var svg = d3.select("body").selectAll("foo")
  .data([1, 1])
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100);

svg {
  background-color: tan;
  margin-right: 10px;
  margin-bottom: 10px;
  display: block;
  }

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

它的工作方式是 CSS。代码在<body> 中创建了2 个<svg> DOM 元素。这里是jsfiddle example

您可以利用它来创建自己的多个图表。还有其他可能的技术（在单个 <svg> 元素中创建它们，并为包含单独图表的 <g> 元素处理转换转换）。这是后者的示例：Scatterplot Matrix Brushing

【讨论】：