我在玩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
更新
我已经按照@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);
如果我理解正确,您希望您的svg
位于 id 为div1 的div
的右侧。
使其正常工作,仅在div1 上设置 float: left
是不够的,它需要以 % 或 px 为单位的显式宽度。
其次,您需要将svg
设为 id 为divs 的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>
这是结果-> http://plnkr.co/edit/8lU9fjRHLQjP5xI2PCBf?p=preview