在D3中创建圆图？

Question

I've got a little chart in 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> 

And I'd like to make the chart go back another two or three rings. But that got me thinkings, is there anyway to do this in D3? D3 would probably be able handle the situation where there would be 2+ parents as well, I hope.

Answer 1

Here is my attempt:

First define the data:

Here first array defines the Great Grand Parent.

Second array defines the Grand Parent.

Third array defines the 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"
    }]
  ]
};

Then depending on the array make donut chart:

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);

});

My Assumption:

Each person will have at least (1 father + 1 mother).

You can also have a person with (2 father + 2 mother) but definitely not (2 father + 3 mother) :)

Working code here

Working code name: me having 2 mother 2 father here

Let me know your thoughts :)