Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/452.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用D3选择函数在HTML布局中正确对齐SVG_Javascript_Html_Css_D3.js_Svg - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 使用D3选择函数在HTML布局中正确对齐SVG

Javascript 使用D3选择函数在HTML布局中正确对齐SVG

javascript html css d3.js svg

Javascript 使用D3选择函数在HTML布局中正确对齐SVG,javascript,html,css,d3.js,svg,Javascript,Html,Css,D3.js,Svg,我在玩D3图表 在我的标签中，我有： <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:

我在玩D3图表

在我的
标签中，我有：

<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>
如果我理解正确，您希望您的
svg
位于
div
的右侧，id为div1

首先，为了使其工作，仅在div1上设置
float:left
是不够的，它需要在%或px中显式地设置宽度

其次，您需要使您的
svg
成为
div
的子级，id为div，并将其包装在一个
div
中，该div也以显式宽度浮动：

var svg = d3.select("#divs")
  .append("div")
  .style("float","left")
  .style("width", "75%")
  .append("svg")
  .attr("width", 700)
  .attr("height", 400);
为了使您的代码正常工作，我必须将其修改为：

和div到

这就是结果->

我已经按照你在这里说的做了->但它不起作用。。。如果你加载2个图表（第一个是谷歌图表，第二个是D3图表），它们总是显示在彼此的顶部。。。。 
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);