为 d3.js 中的多个元素生成 ClipPaths

我正在尝试创建部分填充的圆圈，就像最终的《纽约时报》政治大会可视化中的圆圈一样：http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

我在 d3 中找到的两个最清晰的 ClipPaths 代码示例（https://gist.github.com/1067636 https://gist.github.com/1067636 and http://bl.ocks.org/3422480 http://bl.ocks.org/3422480）为每个剪辑路径创建具有唯一 id 的单独 div 元素，然后将这些路径应用到单个元素。

我不知道如何从这些示例转到基于数据值的一组元素中的每个元素具有唯一的圆形 ClipPath 的可视化，以便我可以创建效果。

这是我所拥有的so far:

给定具有以下结构的数据：

data = [        
    {value: 500, pctFull: 0.20, name: "20%"}, 
    {value: 250, pctFull: 0.75, name: "75%"},
    {value: 700, pctFull: 0.50, name: "50%"},        
]

1) 为数据集中的每个对象创建一个带有圆圈的力图。圆的面积是从对象值导出的。

2) 使用 mbostock 示例中的算法根据每个数据点的比例 (pctFull) 计算 k（和 h）http://bl.ocks.org/3422480 http://bl.ocks.org/3422480

3) 使用 k 为每个数据点生成一个覆盖圆的适当区域的矩形。

我认为如果我可以将每个矩形的可见性限制在其各自的圆上，那么插图就可以完成，但这就是我陷入困境的地方。我尝试了很多方法，但没有一个有效。

这是jsfiddle：http://jsfiddle.net/G8YxU/2/ http://jsfiddle.net/G8YxU/2/

在这里查看一个工作小提琴：http://jsfiddle.net/nrabinowitz/79yry/ 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");   

• 看起来为元素指定剪辑路径的唯一方法是使用url(IRI)中的符号clip-path属性，这意味着您需要基于节点数据的每个剪辑路径有一个唯一的 ID。我用过表格clip<node index>对于 id - 因此每个节点都有自己的剪辑路径，并且该节点的其他子元素可以引用它。

• 按照迈克的示例，制作两个不同颜色的圆圈并使用矩形本身作为剪辑路径，而不是制作基于圆圈的剪辑路径，这似乎是最简单的。但无论哪种方式你都可以做到。