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

Question

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

Answer 1

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

首先，这是一个带有附加内容的有效示例：https://jsfiddle.net/mztafs0w/

---

说明：

SVG路径具有以下命令，例如M表示 M ，A表示 A rc，L表示绘制 L 到：

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

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

image source

---

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

• 移动 X（0）Y（-40）-移至顶部
• Arc X半径（40）Y半径（40）XRot（0）> 180deg？（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}替换radius可以轻松调整大小。

添加到您的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部分，并使代码更加DRY。您可能需要执行更多的计算，才能使圆切片在0/90/180/270以外的地方断开。让我知道您是否需要任何帮助，或者可以查看image source以获得更多提示。

我也将family_radius更改为family_radius + 5，因此您可以看到在较小的圆形的白色填充下方绘制的弧。如果不希望这样做，则可以删除这些圆圈上的白色填充（第165 {{1}行），或者根本不为这些圆圈绘制这些切片。