Question

我在css中有一张小图表：

＆＃13;

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

＆＃13;

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

＆＃13;

我想让图表再回到两三圈。但这让我有所思考，无论如何都要在D3中做到这一点？我希望，D3可能能够处理有2个以上父母的情况。

Answer 1

这是我的尝试：

首先定义数据：

这里的第一个数组定义了Great Grand Parent。

第二个数组定义了Grand 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

让我知道你的想法:)。

在D3中创建圆形图？

1 个答案: