1

我正在使用 D3 开发一个项目，特别是bundle layout。

我的主管要求我使用箭头为我的图表添加方向性。当我尝试使用标记来实现这一点时，我所有的箭头都指向右侧，并且没有将自己定位到它们所关联的路径。

我试图通过查看其他没有运气的例子来解决这个问题。我唯一能想到的是“orient = auto”不适用于径向线，因为我看到的所有示例都使用对角线或贝塞尔线。

任何人都可以确认这一点，或指出我正确的方向吗？我对 d3 和 svg 的经验有限，所以我希望有一个简单的解决方案，并且我不必从头开始重建它。如果标记方向不适用于径向线，是否可以使用贝塞尔曲线在束中实现类似的曲线效果？

我的标记创作：

svg.append("defs").append("marker")
        .attr("id", "arrow")
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .attr("fill", "red")
        .attr("refX", 0.1)
        .attr("refY", 5)
    .append("path")
        .attr("d", "M0,0 L10,5 L0,10");

路径创建：注意-我尝试在“d”之前和之后放置“marker-end”，这只是它的当前状态。

path = svg.selectAll("path.link")
  .data(links)
.enter().append("svg:path")
  .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
  .attr("marker-end", "url(#arrow)")
  .attr("d", function(d, i) { return line(splines[i]); });

和“线”，很明显正在使用径向线发生器。

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });
4

0 回答 0