如何使两个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中 ，您可以更改窗口宽度以查看此动态布局决策。