如何讓我的兩個d3圖形彼此相鄰？

Question

我試圖讓這兩個divs叫bar1和bar2出現在另一個旁邊。我嘗試了一下svg和div id。不知道如何讓這兩個圖形並排。

這裏是BAR1：

var margin = {top: 20, right: 20, bottom: 30, left: 40}; 

    var width = 360 - margin.left - margin.right, 
    height = 330 - margin.top - margin.bottom; 

    var chart1 = d3.select("#bar1") 
    .append("svg") 
    .attr('id', 'bar1svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom); 

    var svg = d3.select("#bar1svg"); 

    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
    y = d3.scaleLinear().rangeRound([height, 0]); 

var g = chart1.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top +  ")"); 

d3.csv ("data/housingdata.csv", function(d) { 
    d.median_housing_prices = +d.median_housing_prices; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

x.domain(data.map(function(d) { return d.neighborhoods; })); 
y.domain([0, d3.max(data, function(d) { return  d.median_housing_prices; })]); 

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

g.append("g") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(20, 's')) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency"); 

    g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.neighborhoods); }) 
    .attr("y", function(d) { return y(d.median_housing_prices); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { return height - y(d.median_housing_prices); }); 

}); 

這裏是條2：

var chart2 = d3.select("#bar2") 
    .append("svg") 
    .attr('id', 'bar2svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom); 

    var g2 = chart2.append("g2") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("data/housingdata2.csv", function(d) { 
d.median_housing_prices = +d.median_housing_prices; 
return d; 
    }, function(error, data) { 
    if (error) throw error; 

x.domain(data.map(function(d) { return d.neighborhoods; })); 
y.domain([0, d3.max(data, function(d) { return d.median_housing_prices; })]); 

g2.append("g2") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

g2.append("g2") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(10, 's')) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency"); 

g2.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.neighborhoods); }) 
    .attr("y", function(d) { return y(d.median_housing_prices); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { return height - y(d.median_housing_prices); }); 
}); 

Answer 1

這裏有很多d3代碼，模糊了你沒有d3甚至SVG問題，但是標準的HTML/CSS佈局問題。

瀏覽器試圖並排排列相鄰的<svg>（和<img>）元素，但如果他們判斷元素一起對當前寬度「過寬」，則切換到垂直佈局。在CSS佈局術語中，默認情況下它們有display: inline。 <div>是塊元素，但是，除非CSS被更改，否則垂直佈局。訣竅是顛覆這一點，和並排佈局堅持邊，就像這樣：

注二等<svg>由窗口邊框裁剪，因爲你堅持並排佈局方面，不管發生什麼事。

所有這些方法都是HTML/CSS修正。例如： -

• 把SVGs相鄰的表格單元格
• 使用float屬性，使SVGs浮動左或右。
• 添加一個容器<div>並絕對放置其中的SVG。
• 添加一個容器<div>並使用文本環繞控制來並排保留SVG。
• 大概有六個人。

使用含<div>與CSS屬性white-space: nowrap，然後設置您的SVG-continaing <div>元素display: inline是一個簡單的解決方案，很好的結構你的HTML，但操作簡單，可靠，maintanable的方式表，浮動，而絕對定位的方法則不然。 HTML中的快速和骯髒的公式如下。 （這是整潔的定義CSS文件中的樣式。）

<div style="white-space: nowrap;"> 
    <div id="bar1" style="display: inline"></div> 
    <div id="bar2" style="display: inline"></div> 
</div> 

這裏是思想的running demo。

這種「永遠並排！」的缺點命令是，嗯， 你可能會成功。然後元素總是並排的，如果沒有足夠的空間讓它們完全顯示，那麼即使是 。如果你不想那麼永遠和永遠，試試float: left樣式#bar1，你的<div>和<svg>幾乎沒有 的餘量。在Fiddle中，您可以更改窗口寬度以查看此動態佈局決策。