我可以在 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>
但这不是正确的解决方案。 谢谢大家!!
最佳答案
在 HTML 中,svg>
默认情况下,元素显示为内联,这意味着您无需执行任何操作即可并排显示它们。
这是一个证明它的小演示:
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 有 880 像素宽,你需要一个至少 1780 像素的窗 Eloquent 能并排看到它们。
另一种方法是将两个 SVG 都放在 <div>
中宽度大于 1760px(如 LeBeau 解释的 in his answer here ),这将在底部创建一个滚动条:
<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
和 overflow-x
.
关于javascript - 并排放置2个svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44073386/