有没有可能将D3.tree()用于包含父类而不是子类的数据集？

Question

我正在使用D3创建家谱。我的数据集确实是分层的，但树的根节点是子节点。每个“子节点”包含两个“父”节点，代表每个孩子的两个父母。这是我的数据示例。

    {
    name: "Morgans Jumpin Jack Flash",
    imagePath: "",
    description: "",
    subTitle: "",
    body: "",
    icon: "",
    iconColor: "",
    gender: "m",
    parents: [
        {
            name: "Moganas Heart of Fire",
            imagePath: "",
            description: "",
            subTitle: "",
            body: "",
            icon: "",
            iconColor: "",
            gender: "f",
            parents: [
                {
                    name: "Elkhaus Ice Storm",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "m",
                    parents: []
                },{
                    name: "Morganas First Love",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "f",
                    parents: []
                },
            ]
        },{
            name: "Desperado Hogan von der Accani",
            imagePath: "",
            description: "",
            subTitle: "",
            body: "",
            icon: "",
            iconColor: "",
            gender: "m",
            parents: [
                {
                    name: "Jim von Aurachgrund",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "m",
                    parents: []
                },{
                    name: "Heroina D. Altobella",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "f",
                    parents: []
                },
            ]
        },
    ]
}

树中的每个节点都代表一只狗。这里的想法是，您可以通过沿着家谱到父母、祖父母等来查看给定的狗的谱系。

是否可以在不修改数据的情况下将给定的数据集与d3.tree（）一起使用？（我知道我可能只是将“父母”重命名为“孩子”，但这对下一个查看数据集的人来说会令人难以置信地困惑。）

Answer 1

您不需要改变您的原始数据集，而是当您使用d3.hierarchy创建根时，您可以指定哪个属性包含“子元素”:

var root = d3.hierarchy(data, function(d) {
   return d.parents;  
})

第二个参数是“子”访问器，但您可以使用它来表示父母。我刚刚保留了从左到右的布局，但将其更改为从右到左的布局是相当微不足道的：

var data = {
    name: "Morgans Jumpin Jack Flash",
    imagePath: "",
    description: "",
    subTitle: "",
    body: "",
    icon: "",
    iconColor: "",
    gender: "m",
    parents: [
        {
            name: "Moganas Heart of Fire",
            imagePath: "",
            description: "",
            subTitle: "",
            body: "",
            icon: "",
            iconColor: "",
            gender: "f",
            parents: [
                {
                    name: "Elkhaus Ice Storm",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "m",
                    parents: []
                },{
                    name: "Morganas First Love",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "f",
                    parents: []
                },
            ]
        },{
            name: "Desperado Hogan von der Accani",
            imagePath: "",
            description: "",
            subTitle: "",
            body: "",
            icon: "",
            iconColor: "",
            gender: "m",
            parents: [
                {
                    name: "Jim von Aurachgrund",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "m",
                    parents: []
                },{
                    name: "Heroina D. Altobella",
                    imagePath: "",
                    description: "",
                    subTitle: "",
                    body: "",
                    icon: "",
                    iconColor: "",
                    gender: "f",
                    parents: []
                },
            ]
        },
    ]
}

var root = d3.hierarchy(data, function(d) {
  return d.parents;
})



var width =500;
var height = 300;
var margin = {left:100,top:50,right:100,bottom:50};

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height)
var g = svg.append("g")
  .attr("transform","translate("+margin.left+","+margin.top+")");



var tree = d3.tree().size([height-margin.top-margin.bottom,width-margin.left-margin.right]);
var path = d3.linkHorizontal().x(function(d) { return d.y; }).y(function(d) { return d.x; })
var layout = tree(root);

var link = g.selectAll(null)
  .data(layout.links())
  .enter().append("path")
  .attr("class","link")
  .attr("d", path)

var text = g.selectAll(null)
  .data(root.descendants())
  .enter().append("text")
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.text(function(d) { return d.data.name; })
  .attr("y",-15)
  .attr("x",-10)

var node = g.selectAll(null)
  .data(root.descendants())
  .enter().append("circle")
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
  .attr("class","node")
  .attr("r",function(d) { return d.data.name == "" ? 0 : 8; });

path {
  fill:none;
  stroke: #888;
  stroke-width: 2px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>