如何使用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的path绘制圆弧。

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

说明：

SVG路径具有如M为命令中号 OVE，A为甲 RC，L为拉伸大号 INE到：

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

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

图片来源

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

• 移动 X（0）Y（-40）-移至顶部
• 圆弧 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以外的地方断开。让我知道您是否需要任何帮助，或者可以查看图像源以获取更多提示。

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