为d3.js中的多个元素生成clipPath [英] generate clipPaths for multiple elements in d3.js

问题描述

我试图创建部分填充的圆圈，如最终的NYT政治会议可视化中的圆圈：和

>

  // blue circle 
 node.append（circle）
 .attr（r，function（d，i）{return rVals [i] ;}）
 .style（fill，＃80dabe）
 .style（stroke，＃1a4876）; 
 
 //剪切路径为棕色圆
 node.append（clipPath）
 //为此节点创建唯一的标识符
 .attr（'id '，function（d）{returnclip+ d.index}）
 //使用矩形指定剪辑路径本身
 .append（'rect'）
 .attr x，函数（d，i）{return rVals [i] *（-1）;}）
。 } 
 .attr（y，function（d，i）{return rVals [i]  - （2 * rVals [i] * kVals [i]高度函数（d，i）{return 2 * rVals [i] * kVals [i];}）; 
 
 //棕色圆形
 node.append（circle）
 //使用特定节点剪辑路径剪辑
 .attr（clip-path ，function（d）{returnurl（#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 - 所以每个节点都有自己的剪辑路径，节点的其他子元素可以引用它。




• 按照Mike的例子，看起来最容易，做两个不同颜色的圆圈，并使用矩形本身作为剪辑路径，剪辑路径。但你可以这样做。

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/convention-word-counts.html

The two clearest code examples I've found for clipPaths in d3 ( https://gist.github.com/1067636 and http://bl.ocks.org/3422480) create individual div elements with unique ids for each clip-path and then apply these paths to single elements.

I can not figure out how to go from these examples to a visualization with a unique circular clipPath for each element in a set of elements based on data values so that I can create my effect.

Here is what I have so far:

Given data with the following structure:

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

1) Create a force diagram with a circle for each object in the dataset. The area of the circle is derived from the objects value.

2) Calculate k (and h) from a proportion (pctFull) for each datapoint using the algorithm from the mbostock example http://bl.ocks.org/3422480

3) Use k to generate a rect for each datapoint that covers the appropriate area of the circle.

I think the illustration would be done if I could limit the visibility of each rect to its respective circle but this is where I am stuck. I've tried a bunch of things, none of which have worked.

Here's the jsfilddle: http://jsfiddle.net/G8YxU/2/

解决方案

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.

这篇关于为d3.js中的多个元素生成clipPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！