Question

我创建了一个甜甜圈图，并且正在尝试使其具有响应性。我希望高度具有最大值。如果窗口大小更改，则甜甜圈将更改属性（宽度和高度）。现在，我想设置一个最大高度值，当然，我需要保持该比例不变。请注意，我希望将甜甜圈图水平对齐（屏幕左右两侧的边距相同）。

我尝试使用window.innerWidth和innerHeight来更改宽度值，但没有成功。我还尝试在代码的D3部分中为高度添加max属性。

var dataset = {
    numbers: [3200, 5400, 8600]
};

var width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;

var enterClockwise = {
    startAngle: 0,
    endAngle: 0
};

var enterAntiClockwise = {
    startAngle: Math.PI * 2,
    endAngle: Math.PI * 2
};

//var color = d3.scale.category20();
var color = d3.scale.ordinal().range([d3.rgb("#c7003b"), d3.rgb('#000'), d3.rgb('#ccc'),d3.rgb('transparent')])

var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(radius - 80)
  .outerRadius(radius - 40);
  
var arcThin = d3.svg.arc()
  .innerRadius(radius - 65)
  .outerRadius(radius - 55);

var svg = d3.select('#Donut-chart').append('svg')
     .attr('id', 'Donut-chart-render')
     .attr("width", '100%')
     .attr("height", '100%')
     .attr('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height)
     .attr('preserveAspectRatio', 'xMinYMin').append("g").attr("class", "parent");

var angleData = pie(dataset.numbers);
angleData[1].startAngle = 0;
angleData[1].endAngle = -angleData[1].endAngle + angleData[0].endAngle;
angleData[2].startAngle = angleData[0].endAngle;
angleData[2].endAngle = (2*Math.PI) + angleData[1].endAngle;
	 
var path = svg.selectAll("path")
  .data(angleData)
  .enter().append("path")
    .attr("fill", function (d, i) { return color(i); })
    .attr("d", function(d){
      	return arc(enterClockwise);
    })
    .each(function (d) {
        this._current = {
            data: d.data,
            value: d.value,
            startAngle: enterClockwise.startAngle,
            endAngle: enterClockwise.endAngle
        } 
    });

path.transition()
    .duration(750)
    .attrTween("d", arcTween);


	
function createChart() {
    path = path.data(pie(dataset[this.value]));
    path.enter().append("path")
        .attr("fill", function (d, i) {
            return color(i);
        })
        .attr("d", arc(enterAntiClockwise))
        .each(function (d) {
            this._current = {
                data: d.data,
                value: d.value,
                startAngle: enterAntiClockwise.startAngle,
                endAngle: enterAntiClockwise.endAngle
            };
        });

}

function arcTween(a, j) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function (t) {
        return (j === (dataset.numbers.length - 1)) ? arcThin(i(t)) : arc(i(t));
    };
}

function type(d) {
    d.value = +d.value;
    return d;
}

@import url(https://fonts.googleapis.com/css?family=Karla);body{font-family:Karla,sans-serif;margin:auto;position:relative}.text{text-anchor:middle;color:#000;font-size:1.7em;font-weight:700;text-transform:uppercase}#legend{align-items:center;border-radius:5px;display:flex;height:0%;justify-content:space-around;width:95%;font-size:25px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>

<div id="Donut-chart"></div>

Answer 1

从SVG元素中删除width，height和preserveAspectRatio属性，并通过CSS在其上设置max-height。像这样：

var dataset = {
    numbers: [3200, 5400, 8600]
};

var width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;

var enterClockwise = {
    startAngle: 0,
    endAngle: 0
};

var enterAntiClockwise = {
    startAngle: Math.PI * 2,
    endAngle: Math.PI * 2
};

//var color = d3.scale.category20();
var color = d3.scale.ordinal().range([d3.rgb("#c7003b"), d3.rgb('#000'), d3.rgb('#ccc'),d3.rgb('transparent')])

var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(radius - 80)
  .outerRadius(radius - 40);
  
var arcThin = d3.svg.arc()
  .innerRadius(radius - 65)
  .outerRadius(radius - 55);

var svg = d3.select('#Donut-chart').append('svg')
     .attr('id', 'Donut-chart-render')
     // .attr("width", '100%')
     // .attr("height", '100%')
     .attr('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height)
     //.attr('preserveAspectRatio', 'xMinYMin')
.append("g").attr("class", "parent");

var angleData = pie(dataset.numbers);
angleData[1].startAngle = 0;
angleData[1].endAngle = -angleData[1].endAngle + angleData[0].endAngle;
angleData[2].startAngle = angleData[0].endAngle;
angleData[2].endAngle = (2*Math.PI) + angleData[1].endAngle;
	 
var path = svg.selectAll("path")
  .data(angleData)
  .enter().append("path")
    .attr("fill", function (d, i) { return color(i); })
    .attr("d", function(d){
      	return arc(enterClockwise);
    })
    .each(function (d) {
        this._current = {
            data: d.data,
            value: d.value,
            startAngle: enterClockwise.startAngle,
            endAngle: enterClockwise.endAngle
        } 
    });

path.transition()
    .duration(750)
    .attrTween("d", arcTween);


	
function createChart() {
    path = path.data(pie(dataset[this.value]));
    path.enter().append("path")
        .attr("fill", function (d, i) {
            return color(i);
        })
        .attr("d", arc(enterAntiClockwise))
        .each(function (d) {
            this._current = {
                data: d.data,
                value: d.value,
                startAngle: enterAntiClockwise.startAngle,
                endAngle: enterAntiClockwise.endAngle
            };
        });

}

function arcTween(a, j) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function (t) {
        return (j === (dataset.numbers.length - 1)) ? arcThin(i(t)) : arc(i(t));
    };
}

function type(d) {
    d.value = +d.value;
    return d;
}

#Donut-chart svg {
  max-height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>

<div id="Donut-chart"></div>

将最大高度设置为已响应的D3甜甜圈图

1 个答案: