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

我正在尝试创建部分填充的圆圈，就像纽约时报政治大会的最后一次可视化：

我在d3中找到的两个最清晰的clippath代码示例（和）为每个片段路径创建具有唯一ID的单个div元素，然后将这些路径应用于单个元素

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

以下是我到目前为止的情况：

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

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）

3） 使用k为每个数据点生成一个rect，该数据点覆盖圆的适当区域

我想，如果我能将每个矩形的可见性限制在其各自的圆上，就可以进行演示，但这就是我被卡住的地方。我试过很多方法，但都不奏效

下面是jsfilddle：

---

在这里可以看到一把小提琴：

• 为元素指定剪辑路径的唯一方法似乎是在

  clip path

  属性中使用

  url（IRI）

  符号，这意味着您将需要基于节点数据的每个剪辑路径的唯一id。我使用了id的形式

  clip

  ，因此每个节点都有自己的clip路径，节点的其他子元素可以引用它

• 按照Mike的例子，制作两个不同颜色的圆并使用矩形本身作为剪辑路径似乎是最容易的，而不是制作基于圆的剪辑路径。但你可以用任何一种方法

---

nrabinowiz-谢谢！为每个url创建一个唯一的id（IRI）是我遇到的问题。我确实从两个圆圈开始，但当我无法让剪辑工作时，我使矩形可见，以确保其正确定位。

// 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");