如何使用d3.js将填充的部分添加到SVG圆中
如何使用d3.js将填充的部分添加到SVG圆中
提问于 2019-06-29 05:35:44
我正在使用d3.js生成一些SVG循环。我能够生成它们，但我不知道如何将它们划分为4个相等的部分，并填充每个部分。我在使用d3.js的第4版。
下面是我小提琴上的javascript片段：
var nodes = [
{"type":'family',"id":'f1',"name":'', "image":""},
{"type":'person',"id":'p1',"name":'fred flintstone',"age": 39, "relationship": "father","sex":' '},
{"type":'person',"id":'p2',"name":'wilma flintstone',"age": 36, "relationship": "mother","sex":'m'},
{"type":'person',"id":'p3',"name":'pebbles flintstone',"age": 4 , "relationship": "daughter","sex":'mf'},
{"type":'person',"id":'p4',"name":'dino',"age": 8 ,"relationship": "pet","sex":'m'},
{"type":'family',"id":'f3',"name":'', "image":""},
{"type":'person',"id":'p5',"name":'barney rubble',"age": 43, "relationship": "father","sex":'m'},
{"type":'person',"id":'p6',"name":'betty rubble',"age": 41, "relationship": "mother","sex":'f'},
{"type":'person',"id":'p7',"name":'bam bam rubble',"age": 4, "relationship": "son","sex":'m'},
]
//more code in my fiddle
my.width = function(value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.nodes = function(value) {
if (!arguments.length) return nodes;
nodes = value;
return my;
};
my.links = function(value) {
if (!arguments.length) return links;
links = value;
return my;
};
my.height = function(value) {
if (!arguments.length) return height;
height = value;
return my;
};
return my;
}提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-01 22:45:56
我建议用SVG的路径手动绘制弧。
首先，下面是一个添加了以下内容的工作示例：https://jsfiddle.net/mztafs0w/
解释：
SVG路径具有如下命令:M用于ML，A用于Arc，L用于将Line绘制到：
- 大写字母是绝对像素的移动。
- 小写字母是相对的像素运动。
要使用SVG路径生成填充的饼片，必须执行以下操作：：
假设你的半径是40，你想在右上象限上分一片。这方面的全部命令将是：
- 移动X(0) Y(-40) --移动到顶级
- 弧X-半径(40)Y-半径(40) XRot(0) >180 Arc？(0)扫描(1) X(40) Y(0) -弧向右
- 线X(0) Y(0) --返回中心
压缩为svg路径格式，如下所示：
M 0 -40 A 40 40 0 0 1 40 0 L 0 0 (最小值，M0,-40A40,40,0,0,1,40,0L0,0)
执行这4次以获得所有4个象限是足够简单的，并且用${r}替换半径可以很容易地调整大小。
--添加到JS小提琴中的最终代码：
var slices=[];
slices[0] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `M 0 -${r} A ${r} ${r} 0 0 1 ${r} 0 L 0 0`; } )
.attr("fill", "coral");
slices[1] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `M ${r} 0 A ${r} ${r} 0 0 1 0 ${r} L 0 0`; } )
.attr("fill", "royalblue");
slices[2] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `M 0 ${r} A ${r} ${r} 0 0 1 -${r} 0 L 0 0`; } )
.attr("fill", "olivedrab");
slices[3] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `M -${r} 0 A ${r} ${r} 0 0 1 0 -${r} L 0 0`; } )
.attr("fill", "goldenrod");我建议您删除不工作的describeArc部分，并使代码更多干的。您可以执行更多的计算，使圆片在0/90/180/270以外的地方中断。如果您需要帮助，请告诉我，或者您可以查看图像源以获得更多的提示。
我还将family_radius更改为family_radius +5，这样您就可以看到在这些较小的圆圈的白色填充下绘制的弧线。如果这是不可取的，您可以删除这些圆圈上的白色填充(第165行if(d.type == "family"){return "white"})，或者根本不为这些圆圈绘制这些切片。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56815306
复制相关文章
相似问题
腾讯云开发者
