Javascript 根据json元素动态填充框和文本

我对js和d3都是新手，为得到结果而努力。 我想创建一个类似于索引的树，并在该树节点的角落中基于json属性动态创建一个矩形，如下所示：

因此，我希望根据json文件中的

属性

属性，在树节点上动态生成这些深蓝色矩形。如果任何节点没有

属性

属性，则不应创建此矩形。矩形内是属性属性的值。这个矩形的大小也应该是动态的，就像我有多个逗号分隔的属性一样，然后这个矩形应该动态地改变它的大小。但在花了很多精力之后，我得到了这棵树：

所以我无法创建蓝色矩形，属性值被添加到每个节点（所有属性重叠），无论它是否具有属性

以下是我的代码：

.node rect{
光标：指针；
填充：#fff；
填充不透明度：.5；
行程：#3182bd；
笔划宽度：1.5px；
}
.节点文本{
字体：10px无衬线；
指针事件：无；
}
路径链接{
填充：无；
行程：#9ecae1；
笔划宽度：1.5px；
}
var jsonData=[
{
“名称”：“互联网接入主节点”，
“属性：{“宽带提供商”：“xyz”，“宽带id”：“”}，
“类型”：空，
“操作”：“创建并提供”，
“prnt”：空，
“儿童”：[
{
“名称”：“互联网接入计划”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[]
},
{
“名称”：“服务技术”，
“属性”：{“服务技术”：“XDBL”}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[]
},
{
“名称”：“访问”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[]
},
{
“名称”：“上传速度提升”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[]
},
{
“名称”：“下载速度提升”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[]
},
{
“名称”：“互联网附加服务”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网接入干线”，
“儿童”：[
{
“名称”：“我的在线业务”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网附加服务”，
“儿童”：[]
},
{
“姓名”：“麦克劳德”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网附加服务”，
“儿童”：[]
},
{
“名称”：“AULA 385”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网附加服务”，
“儿童”：[]
},
{
“名称”：“维护”，
“属性”：{}，“类型”：null，
“行动”：“提供”，
“prnt”：“互联网附加服务”，
“儿童”：[]
},
{
“姓名”：“MCAfee”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“互联网附加服务”，
“儿童”：[
{
“名称”：“完全安全”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“MCAfee”，
“儿童”：[]
},
{
“名称”：“防病毒”，
“属性”：{}，
“类型”：空，
“行动”：“提供”，
“prnt”：“MCAfee”，
“儿童”：[]
}
]
}
]
}
]
}
]
var margin={顶部：30，右侧：20，底部：30，左侧：20}，
宽度=960-margin.left-margin.right，
杆高=20，
杆宽=150；
var i=0，
持续时间=400，
根；
var tree1=d3.layout.tree（）
.nodeSize（[0,20]）；
var对角线=功能弯头（d，i）{
返回“M”+d.source.y+”，“+d.source.x
+“V”+d.target.x+“H”+d.target.y；
}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
root=jsonData[0]；
更新（根）；
console.log（root）；
函数更新（源）{
//计算展平的节点列表。TODO使用d3.layout.hierarchy。
var nodes=tree1.nodes（根节点）；
console.log（节点）；
log（“amit:-”+nodes.length）；
变量高度=数学最大值（1000，nodes.length*barHeight+margin.top+margin.bottom）；
d3.选择（“svg”）/.transition（）
//.持续时间（持续时间）
.attr（“高度”，高度）；
//计算“布局”。
forEach（函数（n，i）{
//n、 x=i*bar高度；
n、 x=i*40；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.样式（“不透明度”，1e-6）；
//在父节点的上一个位置输入任何新节点。
nodeEnter.append（“rect”）
.attr（“y”，-barHeight/2）
.attr（“高度”，barHeight）
.attr（“宽度”，barWidth）
.attr（“rx”，5）
.attr（“ry”，5）
.样式（“填充”，颜色）；
nodeEnter.append（“文本”）
.attr（“dy”，3.5）
.attr（“dx”，5.5）
.text（函数（d）{console.log（d.attribute）；返回d.name；}）；
nodes.forEach（函数（n）{
如果（JSON.stringify（n.attribute）！=“{}”）{
var str=JSON.stringify（n.attribute）；
var str1=str.substr（1，str.length-2）；
var attrArr=str1.split（'，'）；
属性forEach（函数（d，i）{
var newStr=d.split（“：”）；
console.log（newStr[0].substr（1，newStr[0].length-2）+“=”+newStr[1].substr（1，newStr[1].length-2））；
nodeEnter.append（“文本”）
.attr（“dy”，i*10+15）
.attr（“dx”，20）
.text（函数（d）{return newStr[0]。substr（1，newStr[0]。length-2）+“=”+newStr[1]。substr（1，newStr[1]。length-2）；}）；
});
}否则{
}
});
//将节点转换到其新位置。
nodeEnter.transition（）
.duration（duration）//注意：它告诉树的持续时间