绕曲线弯曲SVG `<g>`
提问于 2016-11-05 10:25:17
我使用D3.js在直线上绘制一些SVG <path>s。所有这些元素都包含在具有相同垂直转换的<g>中。
我想把这些元素“包裹”在一个圆弧上。最后，每个矩形应成为弧形的一小部分，垂直线将指向圆的中心。
我意识到，我很可能从一开始就可以用弧线来完成这个任务:例如，画厚厚的圆圈，而不是矩形。然而，这听起来像很多的数学和计算，特别是对于刚进入SVG的人来说。
有没有一种方法可以将这些元素转换为临时曲线，这意味着我可以使用绘制这些矩形的代码--也许可以更改transform属性？如果有一个外部SVG库(尽管我没有成功地查看)，我也会考虑使用它。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-05 17:06:00
比使用path弧形命令A-though要容易得多，这与我所期望的不太一样，因为它不能改变围绕圆圈排列的元素--我找到了d3.arc() (以前的d3.svg.arc())。
canvas.selectAll(".xContainer")
.selectAll("path")
.data(...)
.enter()
.append("path")
.attr("fill", function(element, index) { return colorForSize(element[4]); })
.attr("d", function(element, index) {
var arc = d3.arc()
.innerRadius(iR)
.outerRadius(iR + 10)
.startAngle(element[1])
.endAngle(element[2])
.cornerRadius(isRounded ? 8 : 0);
return arc();
});谢谢，Bill。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40441715
复制相关文章
体验 Scala 语言的 Play Web 框架
点击加载更多
腾讯云开发者
