如何使用 d3.js 将填充部分添加到 SVG 圆圈

我正在使用 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;
}

提前非常感谢。

https://jsfiddle.net/pqk8y3mb/ https://jsfiddle.net/pqk8y3mb/

我建议使用 SVG 手动绘制弧线path.

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

解释：

SVG 路径具有 M 等命令M奥夫，A 为Arc, L 绘制Line to:

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

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

image source https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936

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

• Move X(0) Y(-40)-- 移至顶部
• ArcX 半径(40) Y 半径(40) XRot(0) >180deg?(0) 扫描(1)X(40) Y(0)-- 向右圆弧
• Line 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} 替换 radius 可以轻松调整大小。

添加到 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 https://en.wikipedia.org/wiki/Don%27t_repeat_yourself。您可以执行更多计算，使圆切片在 0/90/180/270 以外的位置处断开。如果您需要其中任何方面的帮助，请告诉我，或者您可以查看图片来源 https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936了解更多提示。

我还将 family_radius 更改为 family_radius + 5，这样您就可以看到在这些较小圆圈的白色填充下方绘制的弧线。如果这不合需要，您可以删除这些圆圈上的白色填充（第 165 行）if(d.type == "family"){return "white"}）或者根本不为这些圆圈绘制这些切片。