Javascript 覆盖力定向图中的d3索引值

我正在使用一个力定向图来绘制公司的实体关系。我想做的是将内置索引值用于节点的索引，而不是数组索引。如何覆盖设置的d3索引值？小提琴-

“索引”-es将作为字符串而不是数字存储在圆圈“id”属性中：

您可以添加任意数量的属性，并在以后调用它们。实际上，id标签并不是最好的选择。更好的选择是：数据索引、数据id、数据公司等

附言：

表示法.attr'class'，node'不是错误，但是d3.js对类有特殊的selection.classedname[，value]方法。对于属性，我建议您使用本机js数组：

var styles = {
    node: {stroke: "white", "stroke-width": 1.5, r: 8},
    link: {stroke: "#999", "stroke-width": 0.6}
};
...
var node = svg.selectAll('.node')
    ...
    .attr(styles.node)
    ...

顺便说一下，在SVG中，填充是属性

---

演示：

您可以在或中重新创建它吗？我们应该看到脚本执行的数据和当前结果。

var node = svg.selectAll('.node')
                .data(graphData)
                .enter().append('circle')
                .attr('class', 'node')
                .attr('r', 8)
                .attr('id', function(d){return(d.index);})// use the data 'index' property as node 'id' attribute
                .style('fill', function (d) {
                    return color(d.level);
                })
                .call(force.drag);

var styles = {
    node: {stroke: "white", "stroke-width": 1.5, r: 8},
    link: {stroke: "#999", "stroke-width": 0.6}
};
...
var node = svg.selectAll('.node')
    ...
    .attr(styles.node)
    ...