Duyarlı Donut Grafiği d3

Question

Bu çörek grafiğiyle biraz uğraştım, ancak en boy oranı/viewbox yöntemini kullanarak sadece görüntülemiyor.

Bunu bir pencere yeniden boyutlandırma işleviyle çalışıyorum, ancak bir hata var - kapsayıcı daraltılabildiğinden hatalı olarak yeniden boyutlandırabilir. Bu konuda çalışabilir miyim, ama yorumlanmış kod ile çalışmak için bu konuda herhangi bir ipucu?

Gerçekleşecek olan şey, orijinal pencere boyutuna bağlı olarak, grafiğin boyutuna göre boyutlara sahip olmasıdır. Bu, pencerenin başlangıçta yanlış boyutta olmasının gözükmesine neden olabilir.

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 hedefi sayfası grafik koordinatlardan koordinatları ayırmaktır. .attr('viewBox','0 0 '+width +' '+height) , size [0, width] x [0, height] cinsinden grafik koordinatları verir. Bu, svg'nin sayfadaki boyutundan bağımsızdır. Grafik koordinatlarının ortasının sol üst köşesi yerine ortada olmasını sağlamak için '0 0''u değiştirebilirsiniz (çeviri yapılmış bir g ile çözümünüz de geçerli olmasına rağmen). Son olarak, preserveAspectRatio, gerektiğinde kenarlara dolgu ekleyerek görüntünüzün gerilmediğinden emin olur.

Yani genel olarak bu tamam çalıştığını, Yani size

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')