如何使用d3.js将填充的部分添加到SVG圆 [英] How to add filled sections to SVG circles using d3.js

问题描述

我正在使用d3.js生成一些SVG圈子.我能够生成它们，但是我无法弄清楚如何将它们分成4个相等的部分并用颜色填充每个部分.我正在使用d3.js的版本4.

I am generating some SVG circles using d3.js. I'm able to generate them, but I can't figure how to divide them into 4 equal sections and color fill each section. I'm using version 4 of d3.js.

这是我的小提琴中的我的javascript片段:

Here is a snippet of my javascript from my fiddle:

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的路径手动绘制圆弧.

I would recommend manually drawing the arcs with SVG's path.

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

First, here is a working example with the additions: https://jsfiddle.net/mztafs0w/

说明:

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

SVG Path has commands such as M for Move, A for Arc, L for draw Line to:

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

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

图像源

比方说，您的半径为40，并且您想对右上象限进行切片.整个命令如下:

Let's say your radius is 40 and you want a slice for the top-right quadrant. The entire command for this would be:

• 移动 X(0)Y(-40)-移至顶部
• Arc X半径(40)Y半径(40)XRot(0)> 180deg?(0)扫描(1) X(40)Y(0)-弧形向右
• 线 X(0)Y(0)-返回中心

• Move X(0) Y(-40) -- move to top
• Arc X-Radius(40) Y-Radius(40) XRot(0) >180deg?(0) Sweep(1) X(40) Y(0) -- arc to right
• Line X(0) Y(0) -- return to center

压缩为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可以轻松调整大小.

Performing this 4 times to get all 4 quadrants is simple enough, and replacing radius with ${r} allows the size to be easily adjusted.

添加到您的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以外的其他地方断开.让我知道您是否需要任何帮助，或者可以查看图片来源以获取更多提示.

---

I recommend you remove the non-working describeArc section and make the code more DRY. You may perform more calculations to have the circle slices break at places other than 0/90/180/270. Let me know if you need help with any of those, or you may check the image source for more tips.

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

I also changed the family_radius to family_radius + 5 so you can see the arcs being drawn underneath the white fill of those smaller circles. If this is not desirable you may either remove the white fill on these circles (line 165 if(d.type == "family"){return "white"}) or simply not draw these slices at all for those circles.

这篇关于如何使用d3.js将填充的部分添加到SVG圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！