在一个div中合并两个图表 - d3/css

我绝对不擅长css和这类东西。我有这两个地块（的jsfiddle例子）：在一个div中合并两个图表 - d3/css

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

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

而且我想，让他们在同一div，而不是并排的一面，但像2×1（ 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; 
}

来源

2016-01-13 pceccon

从我从你的描述得到的，你想要的SVG容器像一个block而不是inline-block。实现此目的的一种方法是将width的svg设置为100%，以便宽度将与div容器相同，但高度与您的代码中的高度相同。

工作实例here

如果你想中心对齐的图表中，你可以使用相应的SVG的容器变换的翻译。

此外，如果要实施具有诸如preserveAspectRatio等属性的响应图表，则将宽度设置为100％可能会有所帮助。

来源

2016-01-13 00:52:05 fengshuo

我喜欢你的解决方案，因为我不限制其他'svg's的，我可能有问题，但我结束了一个非常大的div我无法调整。 – pceccon

@pceccon如果将宽度设置为“100％”，则使图表更具响应性也更容易，例如，可以使用svg的preserveAspectRatio属性来控制如何缩放或翻译图表。 – fengshuo

我只是不知道我是如何控制它的。它大于大型图，即堆栈图。 – pceccon

这应做到：

来源

2016-01-13 00:57:44 Zach

在一个div中合并两个图表 - d3/css

回答

相关问题