D3.js D3在父母下面画孩子的路径 var数据=[{ 父项：{路径：“M80 0 L500 0 L500 40 L80 40 Z”，颜色：“红色”}， 儿童：{ a:{路径：“M80 0 L220 0 L220 40 L80 40 Z”}， b:{路径：“M220 0 L360 0 L360 40 L220 40 Z”}， c:{路径：“M360 0 L500 0 L500 40 L360 40 Z”} } }, { 父项：{路径：“M80 40 L500 40 L500 80 L80 80 Z”，颜色：“绿色”}， 儿童：{ a:{路径：“M80 40 L220 40 L220 80 L80 Z”}， b:{路径：“M220 40 L360 40 L360 80 L220 80 Z”}， c:{路径：“M360 40 L500 40 L500 80 L360 80 Z”} } }, ] var parents=d3.选择（“svg”） .全选（“g”） .数据（数据） .enter（）.append（“g”）； parents.append（“路径”） .attr（“d”，函数（d）{return d.parent.path；}） .style（“fill”，函数（d）{return d.parent.color}）；

在如下所示的父路径下绘制子路径的最佳方法是什么？我想知道是否有d3惯用的方法来做到这一点。

孩子a
孩子b
儿童c
孩子a
孩子b
儿童c

---

我创建了一个JSFIDLE示例以获得帮助

您的问题很复杂，因为在D3中，

数据

函数接受三件事：数组、函数或无。更简单的解决方案是更改数据结构。。。但是，我将提出一个完全使用您的数据结构的解决方案

为了实现这一点，在子路径中，我必须使用这个丑陋的数据连接在数组中转换该对象：

var children = childrenGroup.selectAll("foo")
    .data(function(d) {
        var childrenData = [];
        for (var key in d.children) {
            childrenData.push({
                path: d.children[key].path
            })
        };
        return childrenData
    })
    .enter()
    .append("path");

以下是完整的代码，请检查控制台中的SVG：

var数据=[{
家长：{
路径：“M80 0 L500 0 L500 40 L80 40 Z”，
颜色：“红色”
},
儿童：{
a:{
路径：“M80 0 L220 0 L220 40 L80 40 Z”
},
b:{
路径：“M220 0 L360 0 L360 40 L220 40 Z”
},
c:{
路径：“M360 0 L500 0 L500 40 L360 40 Z”
}
}
},
{
家长：{
路径：“M80 40 L500 40 L500 80 L80 80 Z”，
颜色：“绿色”
},
儿童：{
a:{
路径：“M80 40 L220 40 L220 80 L80 Z”
},
b:{
路径：“M220 40 L360 40 L360 80 L220 80 Z”
},
c:{
路径：“M360 40 L500 40 L500 80 L360 80 Z”
}
}
},
];
var svg=d3.选择（“svg”）；
var parents=svg.selectAll（“foo”）
.数据（数据）
.输入（）
.附加（“g”）
.样式（“填充”，功能（d）{
返回d.parent.color
});
parents.append（“路径”）
.attr（“d”，函数（d）{
返回d.parent.path；
});
var childrenGroup=parents.selectAll（“foo”）
.数据（功能（d）{
返回[d]
})
.输入（）
.附加（“g”）；
var childrenGroup.selectAll（“foo”）
.数据（功能（d）{
var childrenData=[]；
for（在d.children中输入var键）{
childrenData.push({
路径：d.children[key]。路径
})
};
返回childrenData
})
.输入（）
.append（“路径”）；
children.attr（“d”，函数（d）{
返回d.path；
})
var mySVG=（新的XMLSerializer（））.serializeToString（svg.node（））；
console.log（mySVG）

---

您的问题很复杂，因为在D3中，

数据

函数接受三件事：数组、函数或无。更简单的解决方案是更改数据结构。。。但是，我将提出一个完全使用您的数据结构的解决方案

为了实现这一点，在子路径中，我必须使用这个丑陋的数据连接在数组中转换该对象：

var children = childrenGroup.selectAll("foo")
    .data(function(d) {
        var childrenData = [];
        for (var key in d.children) {
            childrenData.push({
                path: d.children[key].path
            })
        };
        return childrenData
    })
    .enter()
    .append("path");

以下是完整的代码，请检查控制台中的SVG：

var数据=[{
家长：{
路径：“M80 0 L500 0 L500 40 L80 40 Z”，
颜色：“红色”
},
儿童：{
a:{
路径：“M80 0 L220 0 L220 40 L80 40 Z”
},
b:{
路径：“M220 0 L360 0 L360 40 L220 40 Z”
},
c:{
路径：“M360 0 L500 0 L500 40 L360 40 Z”
}
}
},
{
家长：{
路径：“M80 40 L500 40 L500 80 L80 80 Z”，
颜色：“绿色”
},
儿童：{
a:{
路径：“M80 40 L220 40 L220 80 L80 Z”
},
b:{
路径：“M220 40 L360 40 L360 80 L220 80 Z”
},
c:{
路径：“M360 40 L500 40 L500 80 L360 80 Z”
}
}
},
];
var svg=d3.选择（“svg”）；
var parents=svg.selectAll（“foo”）
.数据（数据）
.输入（）
.附加（“g”）
.样式（“填充”，功能（d）{
返回d.parent.color
});
parents.append（“路径”）
.attr（“d”，函数（d）{
返回d.parent.path；
});
var childrenGroup=parents.selectAll（“foo”）
.数据（功能（d）{
返回[d]
})
.输入（）
.附加（“g”）；
var childrenGroup.selectAll（“foo”）
.数据（功能（d）{
var childrenData=[]；
for（在d.children中输入var键）{
childrenData.push({
路径：d.children[key]。路径
})
};
返回childrenData
})
.输入（）
.append（“路径”）；
children.attr（“d”，函数（d）{
返回d.path；
})
var mySVG=（新的XMLSerializer（））.serializeToString（svg.node（））；
console.log（mySVG）

您的解决方案非常有效！一个问题

var childrenGroup=parents.selectAll（“foo”）.data（函数（d）{return[d]}）.enter（）.append（“g”）

你能不能想一下，这是否可以缩短为

var childrenGroup=parents.append（“foo”）

我只是好奇你是否有特殊原因。非常感谢，没有。HTML和SVG中都没有

foo

标记。这就是我们所说的“输入”选择。请谷歌D3输入选择，有很多关于它的好教程。另外，看看这里：我知道foo不会退出。我的问题是该部分可能会缩写为一行，因为childrenGroup已经继承了父数据，所以我们可能不需要重新输入数据。不，它不能。它实际上继承了数据；但是，这是一个输入选择。您的解决方案非常有效！一个问题

var childrenGroup=parents.selectAll（“foo”）.data（函数（d）{return[d]}）.enter（）.append（“g”）

您认为这是否可以缩短为

var childrenGroup=paren