2

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

});
Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
Richard
  • 62,943
  • 126
  • 334
  • 542
  • Oh dear! Why the downvote? – Richard Sep 29 '17 at 22:05
  • Accidental, was on the phone and did not reailize I clicked anything. SO wont let me rectify that after 15 minutes unless the question is edited. Clumsy fingers, sorry, now rectified. – Andrew Reid Sep 30 '17 at 14:42

1 Answers1

2

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>
Mark
  • 106,305
  • 20
  • 172
  • 230