Question

我可以在d3.js的一个屏幕上使用2个svg。该代码看起来像这样，效果很好：

<svg width="880" height="800" id="svg1"></svg>  
<svg width="880" height="800" id="svg2"></svg>

var svg1 = d3.select("#svg1");

var svg2 = d3.select("#svg2");

我唯一的问题是，svg2出现在svg1下。但我的目标是将它们并排放置。你们知道如何解决这个问题吗？我试图用这段代码操纵svg2的x位置：

<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>

但这不是正确的解决方案。谢谢你们！

Answer 1

在HTML中，svg>元素默认显示内联，这意味着您不需要做任何事情来并排显示它们。

这是一个小型演示来证明它：

＆＃13;

var svg = d3.select("body")
  .selectAll("feynman")
  .data([0,1])
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100)
  .style("background-color", function(d){ 
    return d? "blue" : "orange";
  });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

在你的情况下的问题是宽度：因为每个SVG的宽度为880px，你需要一个至少1780px的窗口来并排查看它们。

另一种方法是将两个SVG放在宽度大于1760px的<div>中（如LeBeau解释in his answer here），这将在底部创建一个滚动条：

＆＃13;

<div style="width:1770px">
  <svg width="880" height="160" id="svg1" style="background-color:blue"></svg>
  <svg width="880" height="160" id="svg2" style="background-color:orange">></svg>
</div>

＆＃13;

您还可以使用overflow和overflow-x。

将2个svg并排放置

1 个答案: