javascript - d3 : smoothly tween a donut chart using arcTween?

Question

我正在使用 D3.js 版本 4 构建圆环图。我想顺利地移动它并使其变小。我可以移动它，但我不能让它变小。

JSFiddle在这里:https://jsfiddle.net/5sar7yp9/ - 单击文本即可查看尺寸如何突然从较大跳到较小。

我怀疑这与我对 arcTween 的定义有关，但我不确定到底是什么。也许我需要内联它？

完整代码:

function updateDataPoints(series, scales) {
    var padAngle = 0.015,
        cornerRadius = 3,
        floatFormat = d3.format('.4r'),
        radius = Math.min(scales.w, scales.h) / 2;
    var outerRadius = radius * 0.8, innerRadius = radius * 0.6;
    var tPie = d3.pie()
        .value(function(d) { return floatFormat(d.y); })
        .sort(null);
    var tArc = d3.arc()
        .outerRadius(outerRadius)
        .innerRadius(innerRadius)
        .cornerRadius(cornerRadius)
        .padAngle(padAngle);
    function arcTween(d) {
        var i = d3.interpolate(this._current, d);
        this._current = i(0);
        return function(t) { return tArc(i(t)); };
    }
    var points = series.select(".data-points")
        .selectAll("path.data-point")
        .data(function(d) { return tPie(d.data_points); });
    var points_enter = points.enter()
        .append("path")
        .each(function(d, i) { this._current = d; })
        .attr("class", "data-point arc")
        .attr("opacity", 0)
        .attr("d", tArc)
        .attr("transform", 'translate(' + scales.w / 2 + ',' + scales.h/2 + ")")
        .transition().duration(1000)
        .attr("fill", function(d) { return 'red'; });
    var points_update = points.merge(points_enter);
    points_update
        .attr("fill", function(d) { return 'red'; })
        .transition().duration(1000)
        .attr("transform", 'translate(' + scales.w / 2 + ',' + scales.h/2 + ")")
        .attr("opacity", 0.8)
        .transition().duration(1000)
        .attrTween('d', arcTween);
    points.exit().transition()
        .duration(1000)
        .attrTween("d", arcTween)
        .remove();
}

function updateSeries(chart_data, plot, scales) {
    var series_data = [chart_data.series[0]];
    var series = plot.selectAll(".series").data(series_data);
    var series_enter = series.enter().append("g").attr("class", "series");
    series_enter.append("g").attr("class", "data-points");
    var series_update = series.merge(series_enter);
    series.exit().remove();
    updateDataPoints(series_update, scales);
}

var svg = d3.select("#chart").append("svg")
   .attr("width", 300)
   .attr("height", 300)
   .append("g")
   .attr("transform", "translate(100,100)");
var scales = { w: 100, h: 100},
    chart_data = {
        'series': [{
            'data_points': [
                { x: 1999, y: 20000},
                { x: 2000, y: 12000},
                { x: 2001, y: 14000}
            ]
        }]
    },
    plot = svg.append('g').attr('class', 'plot');
updateSeries(chart_data, plot, scales);

d3.select('#update').on('click', function() {
    scales.w = 50;
    scales.h = 50;
    updateSeries(chart_data, plot, scales);

});

Answer 1

我认为你把事情搞得太复杂了。您的补间函数看起来像是尝试动态收缩增长/收缩 donut 的各个部分。如果您只是想平滑地调整它们的大小，您可以直接转换路径的 d 属性本身:

points_update
  .attr("fill", function(d) { return 'red'; })
  .transition().duration(1000)
  .attr("transform", 'translate(' + scales.w / 2 + ',' + scales.h/2 + ")")
  .attr("opacity", 0.8)
  .transition().duration(1000)
  .attr('d', function(d){
    return tArc(d);
  });

运行代码:

function updateDataPoints(series, scales) {
	var padAngle = 0.015,
		cornerRadius = 3,
		floatFormat = d3.format('.4r'),
		radius = Math.min(scales.w, scales.h) / 2;
	var outerRadius = radius * 0.8, innerRadius = radius * 0.6;
	var tPie = d3.pie()
		.value(function(d) { return floatFormat(d.y); })
		.sort(null);
    
	var tArc = d3.arc()
		.outerRadius(outerRadius)
		.innerRadius(innerRadius)
		.cornerRadius(cornerRadius)
		.padAngle(padAngle);
  
	var points = series.select(".data-points")
		.selectAll("path.data-point")
		.data(function(d) { return tPie(d.data_points); });
	var points_enter = points.enter()
		.append("path")
        .each(function(d, i) { this._current = d; })
		.attr("class", "data-point arc")
		.attr("opacity", 0)
		.attr("d", tArc)
		.attr("transform", 'translate(' + scales.w / 2 + ',' + scales.h/2 + ")")
		.transition().duration(1000)
		.attr("fill", function(d) { return 'red'; });
	var points_update = points.merge(points_enter);
	points_update
		.attr("fill", function(d) { return 'red'; })
		.transition().duration(1000)
		.attr("transform", 'translate(' + scales.w / 2 + ',' + scales.h/2 + ")")
		.attr("opacity", 0.8)
		.transition().duration(1000)
		.attr('d', function(d){
    	return tArc(d);
    });
	points.exit().transition()
		.duration(1000)
		.attr("d", "")
		.remove();
}

function updateSeries(chart_data, plot, scales) {
	var series_data = [chart_data.series[0]];
	console.log('series', series_data);
	var series = plot.selectAll(".series").data(series_data);
	var series_enter = series.enter().append("g").attr("class", "series");
	console.log('updateSeries series_enter', series_enter.size());
	series_enter.append("g").attr("class", "data-points");
	var series_update = series.merge(series_enter);
	series.exit().remove();
	console.log('updateSeries series_update', series_update.size());
	updateDataPoints(series_update, scales);
}

var svg = d3.select("#chart").append("svg")
   .attr("width", 300)
   .attr("height", 300)
   .append("g")
   .attr("transform", "translate(100,100)");

var scales = { w: 100, h: 100},
	chart_data = {
		'series': [{
			'data_points': [
				{ x: 1999, y: 20000},
				{ x: 2000, y: 12000},
				{ x: 2001, y: 14000}
			]
		}]
	},
	plot = svg.append('g').attr('class', 'plot');

updateSeries(chart_data, plot, scales);

d3.select('#update').on('click', function() {
	scales.w = 50;
	scales.h = 50;
	updateSeries(chart_data, plot, scales);

});

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="update">click text to tween...</div>
	<div id="chart"></div>