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: ![enter image description here][1] The two clearest code examples I've found for clipPaths in d3 ( and 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 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: ![enter image description here][2] [1]: [2]:

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

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

评论 抢沙发

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

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