Question

I’m just starting out with D3.js. I’ve created a simple enough donut chart using this example. My problem is, if I have an array of objects as my data source – data points for ex. would be a1.foo or a1.bar – and I want to switch between them, how would i go about doing this? My current solution looks ugly and it can’t be the proper way of doing it – code below.

//Call on window change event
//Based on some parameter, change the data for the document
//vary d.foo to d.bar and so on

var donut = d3.layout.pie().value(function(d){ return d.foo})
arcs = arcs.data(donut(data)); // update the data

Is there a way I can set the value accessor at run time other than defining a new pie function?

Answer 1

Generally to switch the data that is being displayed you would create a redraw() function that would then update the data for the chart. In the redraw you’ll need to make sure to handle the three cases – what should be done when data elements are modified, what should be done when new data elements are added, and what should be done when data elements are removed.

It usually looks something like this (this example changes the data set through panning, but it doesn’t really matter). See the full code at http://bl.ocks.org/1962173.

function redraw () {

    var rects, labels
      , minExtent = d3.time.day(brush.extent()[0])
      , maxExtent = d3.time.day(brush.extent()[1])
      , visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent});

    ...

    // upate the item rects
    rects = itemRects.selectAll('rect')
        .data(visItems, function (d) { return d.id; })   // update the data
        .attr('x', function(d) { return x1(d.start); })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); });

    rects.enter().append('rect') // draw the new elements
        .attr('x', function(d) { return x1(d.start); })
        .attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); })
        .attr('height', function(d) { return .8 * y1(1); })
        .attr('class', function(d) { return 'mainItem ' + d.class; });

    rects.exit().remove(); // remove the old elements
}