我正在使用 d3.js 生成一些 SVG 圆圈。我能够生成它们，但我不知道如何将它们分成 4 个相等的部分并为每个部分填充颜色。我正在使用 d3.js 的版本 4。

这是我的 fiddle 中的 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;
}

提前致谢。

https://jsfiddle.net/pqk8y3mb/

最佳答案

我建议使用 SVG 的路径 手动绘制圆弧。

首先，这是一个添加了内容的工作示例:https://jsfiddle.net/mztafs0w/

解释:

SVG 路径有一些命令，例如 M 代表M移动，A 代表Arc，L 代表绘制L线到:

• 大写字母是绝对像素移动
• 小写字母是相对像素移动

要使用 SVG 路径制作填充饼图切片，您必须执行以下操作:

image source

假设您的半径为 40，并且您想要右上象限的切片。完整的命令是:

• Move X(0) Y(-40) -- 移动到顶部
• 圆弧 X-Radius(40) Y-Radius(40) XRot(0) >180deg?(0) Sweep(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 fiddle 中的最终代码:

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 部分并使代码更多 DRY .您可以执行更多计算以使圆切片在 0/90/180/270 以外的位置断开。如果您需要任何帮助，请告诉我，或者您可以查看 image source获取更多提示。

我还将 family_radius 更改为 family_radius + 5，这样您就可以看到在那些较小圆圈的白色填充下方绘制的圆弧。如果这不是您想要的，您可以删除这些圆圈上的白色填充(第 165 行 if(d.type == "family"){return "white"})或者干脆不在以下位置绘制这些切片都是为了那些圈子。

关于javascript - 如何使用 d3.js 将填充部分添加到 SVG 圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56815306/