Question

我试图让这两个名为bar1和bar2的div显得彼此相邻。我试着用svg和div ids搞乱一点。不知道如何让这两个图并排。

这是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修复程序。 E.g：

将SVG放在相邻的表格单元格中
使用float属性使SVG向左或向右浮动。
添加一个容器<div>并将SVG绝对定位在其中。
添加容器<div>并使用文本换行控件来保持SVG并排。
可能是其他六个人。

使用包含<div> CSS属性white-space: nowrap，然后将SVG-continaing <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>

这是一个running demo的想法。

这种缺点“总是并排！”命令是，好吧，你可能会成功。然后，元素并排，即使是并排如果没有足够的空间让他们完全展示。如果您不想永远这样，请在float: left上尝试#bar1样式，但很少 <div>和<svg>上的页边距。在Fiddle中，您可以更改窗口宽度以查看此动态布局决策。

如何让我的两个d3图形彼此相邻？

1 个答案: