Блог

Это очень простой вопрос, поэтому заранее приношу извинения. Моя цель — центрировать SVG «холст» в центре окна. Я использую .attr() или я делаю с CSS? Любые предложения были бы замечательными, спасибо. Ниже приведен код, в котором я создаю свой так называемый SVG «холст»..

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

Я бы рекомендовал не добавлять ваш SVG непосредственно к элементу body, а к оболочке div, которую вы могли бы стилизовать в CSS. (со свойствами flexbox, если вам также требуется вертикальное центрирование: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering /)

Вы можете либо стилизовать SVG напрямую, либо обернуть SVG в div.

Способ 1:

 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;
           }
 

Способ 2:

В качестве альтернативы, как предложил Делапуайт, вы можете обернуть 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)