Image 为什么图像没有'；在d3代码中，是否连接到节点？

我试图在force布局中将图像用作节点，但我不知道如何指定图像的x、y位置：

D3：部队布局
/*这里还没有样式规则*/
//宽度和高度
var w=500；
var h=300；
//原始数据
变量数据集={
节点：[{
名字：“亚当”
},
{
姓名：“鲍勃”
},
{
名字：“嘉莉”
},
{
姓名：“多诺万”
},
{
姓名：“爱德华”
}
],
边缘：[{
资料来源：0，
目标：1
},
{
资料来源：0，
目标：2
},
{
资料来源：0，
目标：3
},
{
资料来源：0，
目标：4
},
{
资料来源：1，
目标：2
},
{
资料来源：2，
目标：3
},
{
资料来源：1，
目标：4
}
]
};
//使用数据集中的节点和边初始化简单的力布局
var force=d3.forceSimulation（dataset.nodes）
.force（“电荷”，d3.forceManyBody（））
.force（“链接”，d3.forceLink（数据集边缘））
.力（“中心”，d3.力中心（）.x（w/2）.y（h/2））；
var colors=d3.scaleOrdinal（d3.schemeCategory 10）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//将边创建为线
var edges=svg.selectAll（“行”）
.data（数据集.edges）
.输入（）
.附加（“行”）
.style（“笔划”，“#ccc”）
.样式（“笔划宽度”，1）；
//将节点创建为圆
var nodes=svg.selectAll（“圆”）
.data（dataset.nodes）
.输入（）
.append（“svg:image”）
.attr（'x'，函数（d）{
返回d.x；
})
.attr（'y'，函数（d）{
返回d.y；
})
.attr（'width'，15）
.attr（'height'，15）
.attr（“xlink:href，”https://github.com/favicon.ico");
//每次模拟“滴答”时，都会调用此命令
force.on（“勾号”，函数（）{
edges.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
nodes.attr（“cx”，函数（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
});
});

您添加的是

元素，而不是圆（使用

selectAll（“圆”）

没有任何区别）。因此，您应该在

勾选

功能中使用

x

和

y

。除此之外，还应将图像移动一半的宽度/高度：

nodes.attr("x", function(d) { return d.x - 8; })
    .attr("y", function(d) { return d.y - 8; });

以下是更新的代码：

var w=500；
var h=300；
//原始数据
变量数据集={
节点：[{
名字：“亚当”
},
{
姓名：“鲍勃”
},
{
名字：“嘉莉”
},
{
姓名：“多诺万”
},
{
姓名：“爱德华”
}
],
边缘：[{
资料来源：0，
目标：1
},
{
资料来源：0，
目标：2
},
{
资料来源：0，
目标：3
},
{
资料来源：0，
目标：4
},
{
资料来源：1，
目标：2
},
{
资料来源：2，
目标：3
},
{
资料来源：1，
目标：4
}
]
};
//使用数据集中的节点和边初始化简单的力布局
var force=d3.forceSimulation（dataset.nodes）
.force（“电荷”，d3.forceManyBody（））
.force（“链接”，d3.forceLink（数据集边缘））
.力（“中心”，d3.力中心（）.x（w/2）.y（h/2））；
var colors=d3.scaleOrdinal（d3.schemeCategory 10）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//将边创建为线
var edges=svg.selectAll（“行”）
.data（数据集.edges）
.输入（）
.附加（“行”）
.style（“笔划”，“#ccc”）
.样式（“笔划宽度”，1）；
//将节点创建为圆
var nodes=svg.selectAll（“圆”）
.data（dataset.nodes）
.输入（）
.append（“svg:image”）
.attr（'width'，16）
.attr（'height'，16）
.attr（“xlink:href，”https://github.com/favicon.ico");
//每次模拟“滴答”时，都会调用此命令
force.on（“勾号”，函数（）{
edges.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
nodes.attr（“x”，函数（d）{
返回d.x-8；
})
.attr（“y”，函数（d）{
返回d.y-8；
});
});
在另一个示例中，对于分组的圆/图像元素，是否有任何原因导致在指定圆的cx cy无效时必须使用“平移变换”？attr（“x”，函数（d）{返回d.cx-8；}）.attr（“y”，函数（d）{返回d.cy-8；}）；若要剪切到圆中，是否需要指定剪切路径？thanks@santoku这是因为在这个示例中，我使用group（
）元素来附加圆和图像。是的，您需要使用clipPath，但在该示例中，图标已经是圆形的了！就像你的GitHub图标一样。我现在明白了，只是想知道不使用group的缺点是什么，将所有内容添加到circle以了解g元素如果你不想。。。但是，在tick函数中，您必须同时移动圆和图像。另一个解决方案是使用模式。