Rendering Order In D3.js

Here is the code: //Circle Data Set var circleData = [ { 'cx': 20, 'cy': 20, 'radius': 20, 'color' : 'green' }, { 'cx': 70, 'cy': 70, 'radius': 20, 'color' : 'purple' }];

Solution 1:

You just need to draw your text nodes after drawing your circles.

//Circle Data Setvar circleData = [
    { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
    { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];

//Create the SVG Viewportvar svgContainer = d3.select("#svgContainer")
    .attr("width",200)
    .attr("height",200);

// draw your circles and any other graphic elements first!var circles = svgContainer.selectAll("circle")
    .data(circleData)
    .enter()
    .append("circle")
    .attr("cx", function(d) {return d.cx})
    .attr("cy", function(d) {return d.cy})
    .attr("r", function(d) {return d.radius})
    .attr("fill", function(d) {return d.color})

// These will now be appended AFTER the circles// When you use `append` it will add text nodes to end// of svgContainervar text = svgContainer.selectAll("text")
    .data(circleData)
    .enter()
    .append("text");

// Here you are editing the pre-existing `text` nodes that you added above.// Note that you don't use `append` here.// Instead, you are modifying the d3 selection stored in `text`var textLabels = text
    .attr("x", function(d) { return d.cx; })
    .attr("y", function(d) { return d.cy; })
    .text( function (d) { return"( " + d.cx + ", " + d.cy +" )"; })
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill", "red");

Here is an edited version of your code: http://jsfiddle.net/jrsxLfpg/2/