javascript - 将两个图表合并到一个 div - d3/css

Question

我绝对不擅长 css 之类的东西。我有这两个图(jsfiddle 示例):

https://jsfiddle.net/ermineia/g6vyk7t1/1/

https://jsfiddle.net/rhzkz9gb/16/

我希望它们位于同一个 div 中，但不是并排放置，而是像 2x1(2 行和 1 列)一样。

到目前为止，我得到了这个结果(这些数据加起来没有意义，但这只是一个测试):

我试图在此处重现此行为:

https://jsfiddle.net/0tvLdwxz/

不过这里至少他们在一条线上，看起来更好看。我希望能够将它们放在同一列和不同的行中。我不知道该怎么做。

这是.css:

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.info h4 {
  margin: 0 0 5px;
  color: #777;
}

.info-legend {
  line-height: 18px;
  color: #555;
}

.info-legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.dot {
  stroke: #000;
}

Answer 1

根据我从你的描述中得到的信息，你希望 svg 容器表现得像一个 block 而不是 inline-block。实现这一点的一种方法是将 svg 的 width 设置为 100%，这样宽度将与 相同div 容器，尽管高度与代码中的高度相同。

工作示例 here

如果你想居中对齐图表，你可以在 svg 容器上相应地使用 transform-translate。

此外，如果您想使用 preserveAspectRatio 等属性实现响应式图表，将宽度设置为 100% 可能会有帮助。