将2个svg并排放置 [英] Put 2 svg side by side
问题描述
我可以在d3.js的一个屏幕上使用2个svg。该代码看起来像这样,效果很好:
I am able to use 2 svg on one screen in d3.js. The Code looks like this and it works great:
<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位置:
My only problem is, that svg2 appears under svg1. But my goal is to put them side by side. Do you guys know how to solve that problem? I tried to manipulate the x position of svg2 with this code:
<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>
但这不是正确的解决方案。
谢谢大家!!
but this was not the right solution. Thanks guys!!
推荐答案
在HTML中, svg>
元素默认显示内嵌,这意味着你不需要做任何事情来并排显示它们。
In HTML, the svg>
element has the display inline by default, meaning that you don't need to do anything to show them side by side.
这个是一个证明它的小型演示:
This is a small demo to proof it:
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";
});
<script src="https://d3js.org/d3.v4.min.js"></script>
你遇到的问题是宽度:因为每个SVG有880px宽,你会需要一个至少1780p的窗口x并排看到它们。
The issue in you case is the width: as each SVG has 880px wide, you'll need a window with at least 1780px to see them side by side.
另一种方法是将两个SVG放在< div>
中,宽度大于1760px(正如LeBeau所解释的那样) 在他的回答中),它将在底部创建一个滚动条:
An alternative is putting both SVGs in a <div>
with a width greater than 1760px (as LeBeau explains in his answer here), which will create a scroll bar at the bottom:
<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>
你也可以玩溢出
和 overflow-x
。
这篇关于将2个svg并排放置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!