Question

我开始使用D3js库来编写一个可视化不同网络结构的工具。网络创建，动态交互，如根据程度改变节点大小，搜索功能和节点颜色随时间的动画，已经实现了，但我仍然坚持在边缘绘制箭头。

阅读完文档并浏览不同的blocks.org示例后，我得出结论，svg标记应该是绘制箭头的最佳选择。据我从文档中了解，箭头可以放在'path'和'line'元素上。当我重现一个例子时，一切正常，但是当我尝试将相同的代码实现到我的网络可视化工具中时，箭头将不会出现。虽然显然有些不对劲，但我似乎忽略了错误。

基本上，我已经按如下方式定义了svg标记：

//定义边缘箭头的svg标记

svg.append('defs').selectAll('marker')
    .data(["arrow"]).append('svg:marker')
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append('svg:path')
        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
        .attr('fill', '#ccc')
        .attr('stroke','#ccc');

然后我将它添加到网络中的链接：

var link= svg.append("g")
          .selectAll('line')
          .data(dataset.links)
          .enter()
          .append('svg:line')
          .attr('stroke','black')
          .attr('class','link')
          .attr('marker-end','url(#arrow)');

这将导致以下网络： https://bl.ocks.org/anonymous/c703777036fac93e6ece862a9ac87467

我确实看过上一个问题（d3js arrowheads not showing），但这并没有解决问题。也许有人有想法让箭头工作？

更新：ccprog发表评论后我已经更新了bl.ocks https://bl.ocks.org/anonymous/d1165b950dc50f9ddfcf3c344c05591e

D3js v4中的D3js箭头

0 个答案: