Как изменять размеры svg в зависимости от размеров внешнего контейнера?

Question

[zlodiak]

Я сделал график при помощи библиотеку d3 и поместил его в контейнер .cost-square-wrap.

Я пытался сделать так, чтобы график адаптировался под изменение ширины окна: JSFIDDLE.

Для этого я элементу svg прописал атрибут viewbox и внешнему контейнеру задал css-свойство width: 100%. Но в результате при сжимании окна график не изменяет свои размеры длины и высоты, а хотелось бы.

JS

const dataSet = [
  [ 0,    20 ],
  [ 20,   20 ]
];

const w = 1200;
const h = 250;
const radius = 5;
const padding = 20;
const tickSize = 5;
const tickPadding = 5;
const paddingYaxis = 50;

// scale
var xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataSet, function(d) { return d[0]; })])
                     .range([paddingYaxis, w - (radius * 2)]);

var yScale = d3.scaleLinear()
                     .domain([
                        d3.min(dataSet, function(d) { return d[1]; }), 
                        d3.max(dataSet, function(d) { return d[1]; })
                      ])
                     .range([h - padding, (radius * 2)]);


// graph
const svg = d3.select('body .cost-square-wrap')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
            .attr('viewbox', '0 0 ' + w + ' ' + h);;


const xAxis = d3.axisBottom(xScale)
                .tickSizeInner(-tickSize)
                .tickPadding(tickPadding);

const yAxis = d3.axisLeft(yScale)
								.tickSizeInner(-tickSize)
                .tickPadding(tickPadding);

svg.append('g').attr('transform', 'translate(0,' + (h - padding) + ')').call(xAxis);
svg.append('g').attr('transform', 'translate(' + paddingYaxis + ',0)').call(yAxis);

CSS

svg {
	background: #999;
	width: 100%;

}

.cost-square-wrap {
  width: 100%;
  max-width: 1200px;
}

Answer 1

[Сергей Соколов]

В принципе SVG вписывается в контейнер, достаточно задать тому ширину, а элементу svg указать viewbox.

Один глюк, который не понимаю. Если viewbox задать программно, как у вас в фиддле, через .attr('viewbox', '0 0 1200 250') – svg не становится «живым». Зато если через инструменты разработчика иму изменить параметр viewbox, например, вместо 1200 поставить 1201, все оживает: график вписывается в ширину и меняется при изменении окна.

Глюк исправляется, если не создавать программно SVG и атрибут, а прописать их сразу в HTML.
Рабочий fiddle.