如何使兩個d3圖形彼此相鄰顯示？

Question

我試圖使這兩個稱為bar1和bar2的div彼此相鄰。 我試着把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默認情況下為display: inline 。 但是， <div>是塊元素，因此，請垂直放置，除非CSS對其進行了更改。 訣竅是顛覆這一點，並堅持並排布局，如下所示：

請注意，第二個<svg>被窗口邊框剪裁了，因為您堅持並排布局，所以可能吧。

實現此目的的所有方法都是HTML / CSS修復。 例如：

• 將SVG放在相鄰的表格單元格中
• 使用float屬性使SVG向左或向右浮動。
• 添加一個容器<div>並將SVG絕對放置在其中。
• 添加一個容器<div>並使用文本換行控件來保持SVG並排。
• 大概六個人。

將包含<div>的CSS屬性設置為white-space: nowrap ，然后將要display: inline SVG的<div>元素設置為display: inline是一種簡單的解決方案，可以很好地構造HTML，但通過以下方式是簡單，可靠且可維護的：表格，浮動和絕對定位方法不是。 HTML中快速而骯臟的表述如下。 （在CSS文件中定義樣式比較整齊。）

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

這是一個想法的演示 。

這種“始終並存”的缺點！ 命令很好，您可能會成功。 這樣，即使沒有足夠的空間可以完全顯示元素，元素也始終並排放置。 如果您不想一直如此，請嘗試在#bar1上使用float: left樣式，在<div>和<svg>上留出很少的空白。 在Fiddle中 ，您可以更改窗口寬度以查看此動態布局決策。