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/convention-word-counts.html ![enter image description here][1] 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/ ![enter image description here][2] [1]: http://i.stack.imgur.com/rUmoM.png [2]: http://i.stack.imgur.com/9Rb8M.png

以上就是generate clipPaths for multiple elements in d3.js的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏