Javascript D3.js分层边缘捆绑中如何控制组节点距离

这是D3中HEB可视化示例的链接

---

我注意到在可视化中，组之间有一个清晰的距离（或所谓的空间），显然组之间的距离大于同一组内节点之间的距离。但我没有真正理解代码的哪一部分控制着这个距离。有人知道这里是如何控制距离的吗？我想在我自己的HEB中使用此功能。

组之间的距离由D3集群布局决定。默认行为是在组之间留出一个节点大小的空白空间

这可以通过向集群布局提供自定义的

separation（）

函数来修改。要添加的关键行是：

    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 5 ) })

这会将组距离增加到五个节点宽度

通过选择其他值代替上的

5

，可以获得：

以下是完整的示例：

var直径=300，
半径=直径/2，
内半径=半径-80；
var cluster=d3.layout.cluster（）
.separation（函数（a，b）{return（a.parent==b.parent？1:5）}）
.尺寸（[360，内半径]）
.sort（空）
.value（函数（d）{返回d.size；}）；
var bundle=d3.layout.bundle（）；
var line=d3.svg.line.radial（）
.插入（“束”）
.张力（.85）
.radius（函数（d）{返回d.y；}）
.angle（函数（d）{返回d.x/180*Math.PI；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
var classes=getData（）；
var nodes=cluster.nodes（packageHierarchy（classes）），
链接=packageImports（节点）；
svg.selectAll（“.link”）
.数据（捆绑（链接））
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，行）；
svg.selectAll（“.node”）
.data（nodes.filter（函数（n）{return！n.children；}））
.输入（）
.附加（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“旋转（“+（d.x-90）+”）平移（+d.y+”）；
})
.append（“文本”）
.attr（“dx”，函数（d）{返回d.x<180？8:-8；}）
.attr（“dy”，“.31em”）
.attr（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.attr（“transform”，函数（d）{返回d.x<180？null:“rotate（180）”；}）
.text（函数（d）{return d.key；}）；
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；
//从类名惰性地构造包层次结构。
函数包层次结构（类）{
var-map={}；
函数查找（名称、数据）{
var node=map[name]，i；
如果（！节点）{
node=map[name]=data | |{name:name，子项：[]}；
如果（名称、长度）{
node.parent=find（name.substring（0，i=name.lastIndexOf（“.”））；
node.parent.children.push（节点）；
node.key=name.substring（i+1）；
}
}
返回节点；
}
类。forEach（函数（d）{
查找（d.name，d）；
});
返回映射[“”]；
}
//返回给定节点数组的导入列表。
函数包导入（节点）{
var-map={}，
进口=[]；
//计算从名称到节点的映射。
nodes.forEach（函数（d）{
map[d.name]=d；
});
//对于每个导入，构造从源节点到目标节点的链接。
nodes.forEach（函数（d）{
if（d.imports）d.imports.forEach（函数（i）{
push（{source:map[d.name]，target:map[i]}）；
});
});
退货进口；
}
函数getData（）{
返回[
{“name”：“Female.Ann”，“imports”：[“Male.Andrew”]}，
{“name”：“Female.Brenda”，“imports”：[“Male.Bill”]}，
{“name”：“Female.Claudia”，“imports”：[“Male.Andrew”]}，
{“name”：“Female.Claudia”，“imports”：[“Male.Bill”]}，
{“name”：“Female.Deborah”，“imports”：[“Male.Darryl”]}，
{“name”：“Female.Emily”，“imports”：[“Male.Andrew”]}，
{“name”：“Female.Flora”，“imports”：[“Male.Darryl”]}，
{“name”：“Female.Gia”，“imports”：[“Male.Darryl”]}，
{“name”：“Female.Hannah”，“imports”：[“Male.Curtis”]}，
{“name”：“Female.Irene”，“imports”：[“Male.Hugh”]}，
{“name”：“Male.Andrew”，“imports”：[“Female.Emily”]}，
{“name”：“Male.Bill”，“imports”：[“Female.Emily”]}，
{“name”：“Male.Curtis”，“imports”：[“Female.Emily”]}，
{“name”：“Male.Darryl”，“imports”：[“Female.Claudia”]}，
{“name”：“Male.Edgar”，“imports”：[“Female.Claudia”]}，
{“name”：“Male.Franklin”，“imports”：[“Female.Claudia”]}，
{“name”：“Male.George”，“imports”：[“Female.Claudia”]}，
{“name”：“Male.Hugh”，“imports”：[“Female.Claudia”]}，
];
};
.node{
字体：11px“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.链接{
笔画：钢蓝；
笔画不透明度：.4；
填充：无；
}
我已经得到了这个，cluster（）得到了一个默认设置，即使用一个节点的宽度来分隔组。分离（可能）更改此值