我正在尝试在 Google 地图叠加层上进行可视化,其中我用节点表示点,用边表示节点之间的链接。这些节点和边是使用 JavaScript 的 d3 库生成的。路径是根据 json 文件生成的。我现在想做的是在每条路径的末尾添加一个箭头标记,以指示路径的方向。为此,我使用了此示例,并首先指示 d3 在 defs 元素中添加包括其路径的标记,并且在生成路径期间,指示 d3 通过使用“marker-end”属性来包含标记使用 url 属性通过 id 引用标记元素的值。下面显示了在每个路径中定义和引用标记的代码片段。
d3.json("./json/routes.json", function(route_data) {
var defs = layerPaths.append("defs")
/* here I generate the marker shape and assign it the "arrow" id */
defs.append("marker")
.attr({
"id": "arrow",
"viewBox": "0 -5 10 10",
"refX": 5,
"refY": 0,
"markerWidth": 4,
"markerHeight": 4,
"orient": "auto"
})
.append("path")
.attr("d", "M 0 -5 L 10 0 L 0 5")
.attr("class", "arrowHead");
/* here I start generating …Run Code Online (Sandbox Code Playgroud)