使用D3選擇功能在HTML布局中正確對齊SVG
[英]Using D3 selection functions to properly align SVG in HTML layout
問題描述
我在玩D3圖表。
在我的<body>標簽中，我有：
<body>
<div id="divs" style="margin-left: 5px; width: 100%;">
<d1 style="float: left;"><big>Oil Consumption - Barrels (from 1965)</big></d1> <br><br>
<d1 style="float: left;">BP Statistical Review of World Energy, June 2015</d1> <br><br>
<div id="div"></div>
<div id="div1" style="float: left;"></div>
</div>
</body>
在我的Javascript代碼中，我有：
var svg = d3.select("body").append("svg").attr("width",700).attr("height",400);
問題是d3.select("body")在最后一個div之后垂直添加我的svg圖表，而我想做的是將svg與div水平對齊。
我怎樣才能做到這一點？
這是完整的Plunkr-> Plunkr
UPDATE
我已經按照@Mark的建議嘗試了，但是沒有用。 這是完整的Plunkr-> Plunkr
var svg = d3.select("#divs")
.append("div")
.style("float","left")
.style("margin-left",400)
.style("width", "75%")
.append("svg")
.attr("width", 700)
.attr("height", 400);
1 個解決方案
解決方案1
1 已采納 2015-11-24 16:22:59
如果我對您的理解正確，則希望將svg定位在ID為div1的div的右側。
首先，為了使其正常工作，僅設置float: left在div1上是不夠的，它需要以％或px為單位的顯式寬度 。
其次，您需要將svg設為div的ID為div的div的子級，並將其包裝在div ，該div也以顯式寬度浮動：
var svg = d3.select("#divs")
.append("div")
.style("float","left")
.style("width", "75%")
.append("svg")
.attr("width", 700)
.attr("height", 400);
更新為了使您的代碼正常工作，我必須將其修改為：
var svg = d3.select("#divs")
.append("div")
.style("margin-left", 400)
.style("margin-top", 50)
.style("width", "75%")
.append("svg")
.attr("width", 800)
.attr("height", 300);
並將div設置為<div id="div1" style="float:left; width: 25%;"></div>
D3 SVG中的選擇
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.