Generate ClipPaths For Multiple Elements In D3.js

I am trying to create partially filled circles like the ones in the final NYT political convention visualization: http://www.nytimes.com/interactive/2012/09/06/us/politics/conventi

Solution 1:

See a working fiddle here: http://jsfiddle.net/nrabinowitz/79yry/

// blue circle
node.append("circle")
    .attr("r", function(d, i) {return rVals[i];})
    .style("fill", "#80dabe")                
    .style("stroke", "#1a4876");   

// clip path for the brown circle
node.append("clipPath")
    // make an id unique to this node
    .attr('id', function(d) { return "clip" + d.index })
  // use the rectangle to specify the clip path itself 
  .append('rect')
    .attr("x", function(d, i){ return rVals[i] * (-1);})
    .attr("width", function(d, i){ return rVals[i] * 2;})
    .attr("y", function(d, i) {return rVals[i] - (2  * rVals[i] * kVals[i]);})
    .attr("height", function(d, i) {return 2  * rVals[i] * kVals[i];});

// brown circle
node.append("circle")
    // clip with the node-specific clip path
    .attr("clip-path", function(d) { return "url(#clip" + d.index + ")"})
    .attr("r", function(d, i) {return rVals[i];})
    .style("fill", "#dabe80")                
    .style("stroke", "#1a4876");   

• It looks like the only way to specify a clip path for an element is to use the url(IRI) notation in the clip-path attribute, which means that you'll need a unique id for each clip path based on the node data. I've used the form clip<node index> for the id - so each node gets its own clip path, and other sub-elements of the node can refer to it.

• It seemed easiest, following Mike's example, to make two circles of different colors and use the rectangle itself for the clip path, rather than making a circle-based clip path. But you could do it either way.