I'm looking to create a pie chart with floating labels using D3. I'm new to D3 and I'm not even sure this is possible? Can you use the labels of one graph in another somehow? If you can, can you point me to an example?

Shorter Explanation: I want labels from: http://bl.ocks.org/1691430

enter image description here ...to be on a pie chart.

Here's the code I was running below: Or in a JSBIN: http://jsbin.com/awilak/1/edit

If I understand his code correctly, this is the section that adds the labels. I don't understand what the labelForce.update does. From there, I don't care about transition, so that line isn't needed. Then the rest is just drawing the circles and adds a link / line? If someone could integrate that would be amazing but if you can help me understand what's going on and what I'm missing I'd be more than grateful.

// Now for the labels
// This is the only function call needed, the rest is just drawing the labels
anchors.call(labelForce.update)

labels = svg.selectAll(".labels")
    .data(data, function(d,i) {return i;})
labels.exit()
    .attr("class","exit")
    .transition()
    .delay(0)
    .duration(500)
    .style("opacity",0)
    .remove();

// Draw the labelbox, caption and the link
newLabels = labels.enter().append("g").attr("class","labels")

newLabelBox = newLabels.append("g").attr("class","labelbox")
newLabelBox.append("circle").attr("r",11)
newLabelBox.append("text").attr("class","labeltext").attr("y",6)
newLabels.append("line").attr("class","link")

labelBox = svg.selectAll(".labels").selectAll(".labelbox")
links = svg.selectAll(".link")
labelBox.selectAll("text").text(function(d) { return d.num})
}

<!DOCTYPE html>
<html>
<head>    
    <meta http-equiv="Content-type" content=
javascript d3.js label pie-chart force-layout
Edit
Report