I am building a doughnut chart using D3.js version 4. I would like to move it and make it smaller, both smoothly. I can move it, but I can't make it smaller.
JSFiddle here: https://jsfiddle.net/5sar7yp9/ - click on the text to see how the size suddenly jumps from larger to smaller.
I suspect it's something to do with my definition of arcTween, but I'm not sure exactly what. Maybe I need to inline it?
Full code:
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);
});
I think you are over complicating it. Your tween function looks like an attempt to shrink dynamically grow/shrink the individual segments of the donut. If you just want to resize them smoothly, you can just transition the path's d attribute itself:
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);
});
Running code:
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>