在一個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

回答

相關問題