如何在d3.js中隐藏/显示父节点的子节点？

Question

我是 // GET: api/Parents/GetParentsWith [HttpGet("[action]")] public ask<ActionResult<IEnumerable<ParentDTO>>> GetParentsWith() { var parents = (from pa in _context.Parents select new ParentDTO() { ParentId = pa.ParentId, Name = pa.Name }).ToListAsync(); foreach (ParentDTO parent in await parents) { var children = from child in _context.Children where child.ParentId == parent.ParentId select new ChildDTO() { ChildId = child.ChildId, Name = child.Name }; var pets = from pet in _context.Pets where pet.ParentId == parent.ParentId select new PetDTO() { PetId = pet.PetId, Name = pet.Name }; parent.Children = children; parent.Pets = pets; } return parents; } 的新手，基本上我想要这样的效果：

https://bl.ocks.org/mbostock/1062288

当您单击某个节点时，子节点将被隐藏，如果已经被隐藏，则将显示它们。我发现的示例使用的结构与我的不同：

d3.js

我不知道该怎么做。有人可以帮我吗？这是我的实时代码：

{
"nodes": [
    {
        "id": "1",
        "lotid": "nodo1",
        "type":"circle",
        "epoch": 1511295513000,
        "group": 1,
        "sourceOnly": true,
        "image":"https://www.freeiconspng.com/uploads/no-image-icon-13.png"
    },
    {
        "id": "2",
        "type":"circle",
        "lotid": "nodo2",
        "epoch": 1511324313000,
        "group": 2,
        "sourceOnly": false,
        "image":"https://www.freeiconspng.com/uploads/no-image-icon-13.png"


    },

    {
        "id": "3",
        "type":"circle",
        "lotid": "nodo2",
        "epoch": 1511324313000,
        "group": 2,
        "sourceOnly": false,
        "image":"https://www.freeiconspng.com/uploads/no-image-icon-13.png"


    }

],
"links": [
    {
        "source": "1",
        "target": "2",
        "reltype": "GENEALOGY"
    },
    {
        "source": "1",
        "target": "3",
        "reltype": "GENEALOGY"
    }

 ]
};

https://plnkr.co/edit/RHh9nBEyODpPtJXh9v9T?p=preview