Вертикальное центрирование круга на отзывчивом s3

Question

Я пытаюсь нарисовать круги на отзывчивом SVG.

Вот код для SVG:

const width = window.innerWidth;
const circleWidth = width / 2;
let h = 700;

const svgBackground = d3.select("#container")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${h}`)
  .classed("svg-content", true)
  .on("mouseleave", function () {
    d3.selectAll("circle.neo")
        .style("stroke", ringColour);

    d3.select("div#container")
        .selectAll("p")
        .remove();
})

Это масштабируется быстро, но я не могу понять, как нарисовать круги, чтобы они были центрированы вертикально

let height = svgBackground.style("height");
height = height.slice(0, (height.length - 2));
const halfHeight = height / 2;

let circles = svgBackground.selectAll("circle.neo")
        .data(radius)
        .enter()
        .append("circle")
        .attr("class", "neo")

let circleAttributes = circles
        .attr("cx", circleWidth)
        .attr("cy", halfHeight)
        .attr("r", function (d) { return d })
        .style("stroke", ringColour)
        .style("fill", "none")

Если у кого-нибудь есть советы, как это сделать, я был бы признателен. Вот полный код на js fiddle http://jsfiddle.net/ncbtdk8m/1/

Answer 1

Часть проблемы - стилизация div#container и svg.svg-content.

Нет необходимо использовать атрибуты position и display.

Вы не устанавливаете width и height для svg, и у вас нет обработчика изменения размера, так как вы можете быть отзывчивым.

Зачем добавлять новый центр круга каждый раз, когда вы используете ползунки.

Вы получите только 80 звезд с радиусом 0.5.

Answer 2

Я думаю, что ваша проблема в том, что часть нижней части вашего SVG не видна, потому что .svg-container имеет свойство overflow:hidden. Это заставляет это казаться, что это не было в центре.

Если вы удалите это свойство CSS и правильно настроите свой рост, все начнет выглядеть иначе: http://jsfiddle.net/9dprfwj1/