生成在d3.js多個元素

Question

我想創建部分填充圈像在決賽NYT政治會議可視化的那些clipPaths：http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

兩個清晰的代碼示例我發現對於d3中的clipPath（https://gist.github.com/1067636和http://bl.ocks.org/3422480），爲每個剪輯路徑創建具有唯一標識的單獨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示例http://bl.ocks.org/3422480

3）使用k的算法來生成針對每個數據點一個矩形，其覆蓋的適當區域從每個數據點的比例（pctFull）計算K（和h）這個圈子。

我想如果我可以限制每個矩形的可見性到其各自的圓圈，但這是我被卡住的地方，我會這樣做。我嘗試了一堆東西，其中沒有一個能夠工作。

這裏的jsfilddle：http://jsfiddle.net/G8YxU/2/

Answer 1

看到這裏工作小提琴：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"); 

• 看起來指定剪輯的唯一途徑路徑一個元素是使用clip-path屬性中的url(IRI)表示法，這意味着您將需要基於節點數據的每個剪輯路徑的唯一ID。我使用表格clip<node index>作爲id - 因此每個節點都有自己的剪輯路徑，節點的其他子元素可以引用它。

• 按照邁克的例子，似乎最簡單的做法是製作兩個不同顏色的圓，並將矩形本身用於剪輯路徑，而不是製作基於圓的剪輯路徑。但是你可以這樣做。