javascript – 为d3.js中的多个元素生成clipPaths

2019-07-29 12:37:35 阅读：501 来源： 互联网

标签：javascript svg d3-js geometry force-layout

我正在尝试创建部分填充的圆圈,就像最终的NYT政治会议可视化中的那些：http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

我在d3(https://gist.github.com/1067636和http://bl.ocks.org/3422480)中为clipPaths找到的两个最清晰的代码示例为每个剪辑路径创建了具有唯一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示例http://bl.ocks.org/3422480中的算法,从每个数据点的比例(pctFull)计算k(和h)

3)使用k为每个覆盖圆的适当区域的数据点生成一个矩形.

我想如果我可以将每个矩形的可见度限制在各自的圆圈中,那么就可以完成插图,但这就是我被困住的地方.我尝试过很多东西,但都没有.

这是jsfilddle：http://jsfiddle.net/G8YxU/2/

解决方法:

在这里看到一个工作小提琴：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 .我使用了表单剪辑< node index>对于id – 所以每个节点都有自己的剪辑路径,节点的其他子元素可以引用它.
>按照迈克的例子,制作两个不同颜色的圆圈并使用矩形本身作为剪辑路径,而不是制作基于圆的剪辑路径,这似乎是最简单的.但你可以这样做.

标签：javascript,svg,d3-js,geometry,force-layout
来源： https://codeday.me/bug/20190729/1571336.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 为d3.js中的多个元素生成clipPaths