CODEWITHSUNDEEP
svgd3.js
eshan
eshan

Reputation: 245

Reordering svg dom with d3js

I'm using d3 to render an svg. I have an array of objects, each with a color property, like so:

data = [{'color': 'red'}, {'color': 'blue'}];

I have an update function to draw circles with those colors, like so:

function update(data) {
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color})
        .enter()
        .append('circle').attr('r', 50)
        .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
        .attr('fill', function (d) {return d.color});
    circle.order();
}

My understanding is that the last line in the function, circle.order(), should reorder the nodes in the svg dom to match the order of the data. However, I change the array order and call the update function again, and it doesn't seem to do anything.

jsfiddle demo: http://jsfiddle.net/du7mh/

I need to control the dom order to bring certain elements to the foreground, since there's no z-index in svg. Any help would be appreciated, thanks!

Upvotes: 0

Views: 1631

Answers (1)

Adam Pearce
Adam Pearce

Reputation: 9293

The append selection doesn't have anything in it after update has run once. Setting circle equal to the both current and new elements works:

function update(data) {
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color});
    circle.enter()
        .append('circle').attr('r', 50)
        .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
        .attr('fill', function (d) {return d.color});
    circle.order();
}

http://jsfiddle.net/du7mh/3/

Upvotes: 1

Related Questions