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

Using D3 selection functions to properly align SVG in HTML layout

本文关键字：对齐 SVG 布局 HTML D3 选择 函数 使用      更新时间：2023-09-26

我在玩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

相关文章：