Отзывчивая диаграмма пончика d3

Question

Я немного поиграл с этой диаграммой пончиков, но она не будет отображать только с использованием метода соотношения сторон/вида.

Я получил это, работая с функцией изменения размера окна, но у него есть ошибка - поскольку контейнер, который он может быть, может быть свернут, он может неправильно изменить размер. Я полагаю, что могу обойти это, но какие-нибудь советы о том, как это работать с прокомментированным кодом?

Что имеет значение, так это то, что на основе исходного размера окна диаграмма имеет размеры, основанные на этом ... которые могут исказить внешний вид, если окно не соответствует размеру при его запуске.

https://jsfiddle.net/7rgf09x1/9/

// WORK IN PROGRESS: Responsive using only d3. 
    //  var svg = d3.select('#revenue-chart').append('svg') 
     // .attr('id', 'revenue-chart-render') 
    //  .attr("width", '100%') 
    // .attr("height", '100%') 
    // .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    // .attr('preserveAspectRatio','xMinYMin') 
    // .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")"); 

Answer 1

Целью viewBox является разделение страницы координат из графических координат. Таким образом, .attr('viewBox','0 0 '+width +' '+height) дает графические координаты в [0, ширина] x [0, высота]. Это не зависит от размера svg на странице. Вы можете изменить '0 0', чтобы иметь начало координат графика в центре вместо левого верхнего угла (хотя ваше решение с переводом g также было действительным). Наконец, preserveAspectRatio гарантирует, что ваше изображение не растягивается, добавляя при необходимости дополнительные отступы по бокам.

Так в целом это должно дать вам

var svg = d3.select('#revenue-chart').append('svg') 
     .attr('id', 'revenue-chart-render') 
     .attr("width", '100%') 
     .attr("height", '100%') 
     .attr('viewBox',(-width/2) + ' ' + (-height/2) + ' '+width +' '+height) 
     .attr('preserveAspectRatio','xMinYMin')