Question

这是非常基本的问题，所以提前道歉。我的目标是将SVG＆＃34; canvas＆＃34;在窗口的中心。我使用.attr()还是使用CSS？任何建议都会很精彩，谢谢。下面是我创建所谓的SVG＆＃34; canvas＆＃34; ..

的代码

var svg = d3.select("body")
            .append("svg")
            .attr("width", wi + margin.right + margin.left)
            .attr("height", h);

Answer 1

我建议不要将SVG直接附加到body元素，而是附加到CSS中可以设置样式的包装div。（如果您还需要垂直居中，则使用flexbox属性：http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/）

Answer 2

您可以直接设置 SVG 样式，也可以将 SVG 包装在 div 中。

方法一：

let svg = d3.select("body")
            .append("svg")
            .attr("width", wi + margin.right + margin.left)
            .attr("height", h)
            .style("background-color", "lightblue")
            .style("display", "block")
            .style("margin", "auto")

如果 svg 有很多样式，最好为其分配一个类，然后使用 CSS 定义该类：

let svg = d3.select("body")
            .append("svg")
            .attr("width", wi + margin.right + margin.left)
            .attr("height", h)
            .attr("class", "svg-style")

然后

.svg-style {
        background-color: lightblue;
        display: block;
        margin: auto;
           }

方法二：

或者，正如 Delapouite 建议的那样，您可以将 svg 包装在一个 div 中，然后设置 div 的样式（在 CSS 中或直接）：

<div id = "demo-div" style="text-align: center">
</div>

let svg = d3.select("#demo-div")
            .append("svg")
            .attr("width", wi + margin.right + margin.left)
            .attr("height", h)

如何在窗口d3.js中居中SVG画布

2 个答案: