Javascript D3圆形包装清晰标签溶液

在d3的打包布局中，是否有一种方法可以手动设置子节点的半径（相对于父节点半径的大小），然后让其他子节点根据剩余空间并使用现有的“子节点数量大小”设置其半径

我想做的是： 1.对于每个节点，向子数组添加一个与父节点同名的节点 2.设置此额外子对象的半径，使其具有足够大的半径以包含文本，并确保其相邻对象之间没有重叠 3.在此额外节点上将“填充”和“笔划”设置为“无” 4.在此额外节点上将通过css的点击交互设置为“无” 5.仅使用这些额外节点来显示“它们的”名称（即它们的父节点名称）

---

结果将是一个填充圆，其标签有一个专门指定的空间。如果不手动设置额外子节点的半径，则无法执行此操作，因为它的大小是根据子节点的数量自动确定的。（添加未填充/未排序的子节点以进行补偿效率极低。第一次攻击的第二次攻击不值得我这么做）

请检查这是否有帮助。带有类“extra”的红色背景圆圈是带有父级名称的额外圆圈

var root={
“名称”：“flare”，
“儿童”：[
{
“名称”：“分析”，
“儿童”：[
{
“名称”：“集群”，
“儿童”：[
{“名称”：“凝聚聚类”，“大小”：3938}，
{“名称”：“社区结构”，“大小”：3812}，
{“名称”：“HierarchycalCluster”，“大小”：6714}，
{“名称”：“合并边”，“大小”：743}
]
},
{
“名称”：“图形”，
“儿童”：[
{“名称”：“中间的中心”，“大小”：3534}，
{“名称”：“链接距离”，“大小”：5731}，
{“name”：“MaxFlowMinCut”，“size”：7840}，
{“名称”：“最短路径”，“大小”：5914}，
{“name”：“SpanningTree”，“size”：3416}
]
},
{
“名称”：“优化”，
“儿童”：[
{“名称”：“AspectRatioBanker”，“大小”：7074}
]
}
]
},
{
“名称”：“动画”，
“儿童”：[
{“name”：“Easing”，“size”：17010}，
{“name”：“FunctionSequence”，“size”：5842}，
{
“名称”：“插入”，
“儿童”：[
{“name”：“ArrayInterpolator”，“size”：1983}，
{“name”：“ColorInterpolator”，“size”：2047}，
{“name”：“DateInterpolator”，“size”：1375}，
{“name”：“Interpolator”，“size”：8746}，
{“name”：“MatrixInterpolator”，“size”：2202}，
{“名称”：“NumberInterpolator”，“大小”：1382}，
{“name”：“ObjectInterpolator”，“size”：1629}，
{“name”：“PointInterpolator”，“size”：1675}，
{“名称”：“矩形插值器”，“大小”：2042}
]
},
{“name”：“ISchedulable”，“size”：1041}，
{“名称”：“平行”，“大小”：5176}，
{“名称”：“暂停”，“大小”：449}，
{“名称”：“调度程序”，“大小”：5593}，
{“名称”：“序列”，“大小”：5534}，
{“name”：“Transition”，“size”：9201}，
{“name”：“Transitioner”，“size”：19975}，
{“name”：“TransitionEvent”，“size”：1116}，
{“name”：“Tween”，“size”：6006}
]
},
]
};
var ADEXTRANODE=函数（项目，百分比大小）{
var percentSizeOfNode=percentSize | | 60；//如果不给定，它将占用60%的空间
如果（！item.children）{
返回；
}
var totalChildSize=0；
item.children.forEach（函数（citm，索引）{
totalChildSize=totalChildSize+citm.size；
})
变量nodeSize=（percentSizeOfNode/50）*totalChildSize；
变量名称='name:'+item.name；
item.children.push({
“名称”：名称，
“大小”：节点大小，
“isextra”：对
})
item.children.forEach（函数（citm，索引）{
if（城市儿童）{
附加节点（citm，百分比大小）；
}
})
};
附加节点（根，55）；
var直径=500，
格式=d3.格式（“，d”）；
var pack=d3.layout.pack（）
.尺寸（[直径-4，直径-4]）
.value（函数（d）{返回d.size；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“转换”、“翻译（2,2）”）；
var node=svg.datum（根）。选择全部（“.node”）
.data（包节点）
.enter（）.append（“g”）
.attr（“类”，函数（d）{
如果（d.isextra）{
返回“额外”；
}
返回d.children？“节点”：“叶节点”；}）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
node.append（“标题”）
.text（函数（d）{返回d.name+（d.children？“：”：“：”+格式（d.size））；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）；
node.filter（函数（d）{return！d.children；}）.append（“text”）
.attr（“dy”，“.3em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{返回d.name.substring（0，d.r/3）；}）
圆圈{
填充：rgb（31、119、180）；
填充不透明度：.25；
行程：rgb（31、119、180）；
笔画宽度：1px；
}
.叶圈{
填充：#ff7f0e；
填充不透明度：1；
}
正文{
字体：10px无衬线；
}
.额外的圆圈{
填充物：红色；
}
这个答案就是我目前使用的解决方案，它建立在Ganesh提供的解决方案之上

Ganesh的解决方案摘要：


引入一个函数，该函数在数据上运行，并向每个节点的子数组中注入一个额外的节点，但检查叶节点时除外

我使用Ganesh解决方案的剩余问题：


并非所有父节点都有值，因此它们没有标签
没有说明节点值是如何计算的，json数据中已经提供了这些值
为标签创建的额外节点太小，因为它的邻居总是增长以容纳它的子节点

解决方案和主要发现：


值是基于节点的子节点的总和确定的
在我的示例中，叶节点的值为100
根节点的值大约为31700，这大致准确，因为它总共有316个子节点（1）
        var pack = d3.layout.pack()
        .value(function(d){ 
            if(d.isExtra){ //the property added to injected label nodes
                d.value = d.parent.treeSize*100 //treeSize = size of subTree
                return d.value;
            }
            else{
                d.value = d.treeSize*100;
                return d.value;
            }
        })
        .size([width, height -100 ])