javascript - 在 D3 中创建圆形图表？

Question

我有一个 css 的小图表:

.circle-chart {
  position: relative;
  box-sizing: border-box;
  width: 400px;
  height: 400px;
}

.circle-chart .person {
  position: absolute;
  box-sizing: border-box;
  top: 37.5%;
  left: 37.5%;
  width: 25%;
  height: 25%;
  border-radius: 10000px 10000px 10000px 10000px;
  background: white;
  border: 3px solid black;
  text-align: center;
}

.circle-chart .parentA,
.circle-chart .parentB {
  position: absolute;
  box-sizing: border-box;
  top: 25%;
  left: 25%;
  height: 25%;
  width: 50%;
  border-radius: 10000px 10000px 0 0;
  border-top: 4px solid black;
  border-bottom: 2px solid black;
  border-left: 4px solid black;
  border-right: 4px solid black;
  background: white;
}

.circle-chart .parentB {
  top: 50%;
  left: 25%;
  transform: rotate(180deg);
}

.circle-chart .grandParentA,
.circle-chart .grandParentB,
.circle-chart .grandParentC,
.circle-chart .grandParentD {
  position: absolute;
  box-sizing: border-box;
  top: 12.5%;
  left: 12.6%;
  height: 37.5%;
  width: 37.5%;
  border-radius: 10000px 0 0 0;
  border-top: 4px solid black;
  border-bottom: 2px solid black;
  border-left: 4px solid black;
  border-right: 2px solid black;
}

.circle-chart .grandParentB {
  left: 50%;
  transform: rotate(90deg);
}

.circle-chart .grandParentC {
  top: 50%;
  left: 50%;
  transform: rotate(180deg);
}

.circle-chart .grandParentD {
  top: 50%;
  transform: rotate(270deg);
}

<div class="circle-chart">
  <div class="grandParentA"></div>
  <div class="grandParentB"></div>
  <div class="grandParentC"></div>
  <div class="grandParentD"></div>
  <div class="parentA"></div>
  <div class="parentB"></div>
  <div class="person"></div>
</div>

我想让图表再回退两到三圈。但这让我开始思考，在 D3 中是否可以做到这一点？我希望 D3 可能能够处理有 2 个以上 parent 的情况。

Answer 1

这是我的尝试:

首先定义数据:

这里第一个数组定义了曾祖 parent 。

第二个数组定义祖 parent 。

第三个数组定义父级。

var my = {
  name: "me",
  parentArray: [

    [{
      name: "F",
      relation: "motherC"
    }, {
      name: "G",
      relation: "fatherC"
    }, {
      name: "H",
      relation: "motherD"
    }, {
      name: "I",
      relation: "fatherD"
    }, {
      name: "J",
      relation: "fatherZ"
    }, {
      name: "K",
      relation: "motherZ"
    }, {
      name: "L",
      relation: "fatherE"
    }, {
      name: "M",
      relation: "motherE"
    }],
    [{
      name: "C",
      relation: "motherA"
    }, {
      name: "D",
      relation: "fatherA"
    }, {
      name: "Z",
      relation: "motherB"
    }, {
      name: "E",
      relation: "fatherB"
    }],
    [{
      name: "A",
      relation: "mother"
    }, {
      name: "B",
      relation: "father"
    }]
  ]
};

然后根据数组制作圆环图:

my.parentArray.forEach(function(d, i) {

  var diff = i * 20 + 20 ;
  var arc = d3.svg.arc()
    .innerRadius(radius - diff)
    .outerRadius(radius - (diff - 20));

  var path = svg.selectAll(".grand" + i)
    .data(pie(d))
    .enter().append("path")
    .attr("class", "grand" + i)
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);

});

我的假设:

每个人至少(1个父亲+1个母亲)。

你也可以有一个人有(2个父亲+2个母亲)，但绝对不是(2个父亲+3个母亲):)

工作代码here

工作代号:我有2个妈妈2个爸爸here

让我知道你的想法:)