Question

我正在使用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]); });

和“line”，显然正在使用径向线生成器。

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; });

D3.js：方向标记不起作用。责备径向线？

0 个答案: