Javascript 在D3图形中为svg图像添加边框

我已经使用D3JavaScript库创建了一个图形。它是一个以图像为节点的有向图。我一直试图在图像节点周围添加一个厚边框，但没有成功

这是我的嵌入d3 JS脚本的html：

var json={
“节点”：[
{“x”：50，“y”：50，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：150，“y”：50，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：250，“y”：50，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：350，“y”：150，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：450，“y”：150，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：50，“y”：250，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：150，“y”：250，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：250，“y”：250，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"}
],
“链接”：[
{“源”：0，“目标”：1}，
{“源”：1，“目标”：2}，
{“源”：2，“目标”：3}，
{“源”：3，“目标”：4}，
{“源”：5，“目标”：6}，
{“源”：6，“目标”：7}，
{“源”：7，“目标”：3}
]
};
//设置画布大小：）
可变宽度=900，
高度=500；
//初始化
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//建造箭头。
追加（“svg:defs”）。选择全部（“标记”）
.data（[“end”]）//可以在此处定义不同的链接/路径类型
.enter（）.append（“svg:marker”）//此部分在箭头中添加
.attr（“id”，字符串）
.attr（“视图框”，“0-5 15”）
.attr（“参考文献”，第12页）
.attr（“参考文献”，0）
.attr（“markerWidth”，25）
.attr（“markerHeight”，25）
.attr（“方向”、“自动”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
var-force=d3.layout.force（）
.重力（0）//原子的内聚性/imgs的弹性：）
.charge（-50）//元状态转换
.linkDistance（140）
.尺寸（[宽度，高度]；//画布的自由度
//异常处理
//d3.json（“graph.json”，函数（错误，json）{
//如果（错误）抛出错误；
//重新启动force布局
力
.nodes（json.nodes）
.links（json.links）
.start（）；
//建立链接
var link=svg.selectAll（“.links”）
.data（json.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.attr（“marker end”，“url（#end）”）；//添加带有标记“end”的箭头并将其标识为：
var node=svg.selectAll（“.nodes”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
//附加自定义图像
node.append（“svg:image”）
.attr（“xlink:href”，函数（d）{return d.img；}）//使用映像更新节点
.attr（“x”，函数（d）{return-5；}）//图像离链接有多远？？
.attr（“y”，函数（d）{return-19；}）/---相同---
.attr（“高度”，35）//大小
.attr（“宽度”，35）
.样式（“笔划”、“红色”）/----不起作用
.style（“填充”、“自动”）/----不起作用
.style（“笔划宽度”，5）/----不起作用
;
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
force.stop（）；
});
// });
.link{
笔画：黑色；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}
.node:不（：悬停）.nodetext{
显示：无；
}
我认为您不能使用svg图像的边框，但是如果您的所有图像都是圆，那么您也可以在每个节点上附加一个圆来模拟图像的边框：

node.append("circle")
  .attr("cx", 12.5)
  .attr("cy", 0)
  .attr("r", 17.5)
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", "2px");


var json={
“节点”：[
{“x”：50，“y”：50，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：150，“y”：50，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：250，“y”：50，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：350，“y”：150，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：450，“y”：150，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：50，“y”：250，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：150，“y”：250，“标签”：“lol”，“todoinfo”：“信息在此”，“img”：”https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
{“x”：250，“y”：250，“标签”：“lol”，“todoinfo”：“此处信息”，“img”：”https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"}
],
“链接”：[
{“源”：0，“目标”：1}，
{“源”：1，“目标”：2}，
{“源”：2，“目标”：3}，
{“源”：3，“目标”：4}，
{“源”：5，“目标”：6}，
{“来源”：6，“目标”：