d3.js (svg) 路径方向性与标记端、蜂巢图

Question

场景：

我目前正在使用 d3.js Hive Plots，对于实验场景，我需要控制 link 的视觉方向性。

问题来源：

我正在使用 d3.hive.v0.js "add-on"，并且由于 Hive Plots 图表本身并不携带 link 上的任何视觉方向性信息，附加组件在绘制路径的方向性方面不遵守源节点和目标节点，并且始终顺时针绘制路径，因此在捕捉标记端时始终指向左侧节点的方向。

问题影响

指针不可靠，因为标记所遵循的路径 "end" 不一定位于目标，但可能位于源，具体取决于源和目标彼此的相对位置。

归结为

我知道我可以用自己的 Arcs 绘制自己的 links 并获得更多控制，而不是使用 d3 Hive Plot 库 links，我已经尝试过了，但是好不容易变好，Hive Plot算法很漂亮，我想用一下。

假设我拦截了 d，当它从 Hive Plot link 路径算法返回时。

我找到 d = "M 8.327598234202001e-15,-136 C 101.06769626492562,-91.00176246480473 135.0052608777338,14.189624701397365 79.7912059004442,109.82317321396422";

这给了我一条很好的路径，从顶部开始，然后向下绘制 (CW)，如

中所示

http://jsfiddle.net/hwehqhtm/1/

svg.selectAll(".test")
    .data(d3.range(1))
    .enter().append("path")
    .attr("class", "link")
    .style("stroke", "green")
    .attr("stroke-width", 3)
    .attr("marker-end", "url(#arrow)")
    .attr("d", d)

我的问题是，既然我有 d，是否可以通过对 d 做一些事情来 "reverse the draw direction" 线路？ , - 使 "path end" 成为该行的顶端，并使标记端位于此处，有效地使 link 指向另一个方向。

该行在视觉上应该是相同的，只是在逻辑上 "beginning" 在另一端。

父级 fiddle http://jsfiddle.net/hwehqhtm 使用两个不同的标记作为开始和结束，但是我必须在一些标记结束和标记开始回调中包含新逻辑以将它们打开关闭，如果可能的话，我真的更愿意用数学方法让它绘制 "the other way" by "reversing d"。我不太擅长三角学，不知道这是否有意义。非常欢迎任何关于路径方向性和标记的评论和解决方案！

感谢

Answer 1

似乎可以通过切换参数来完成。上面的 d，由蜂巢图算法创建，结果是格式为 M x y C x1 y1 x2 y2 x y 的 moveto 和 curveto（贝塞尔曲线）。

要反转曲线，将 C 中的端点 x、y 与 M 中的起点 x、y 切换，然后将贝塞尔曲线控制点 x1、y1 与 x2、y2 切换似乎可以做到这一点。

d3.js (svg) 路径方向性与标记端、蜂巢图

d3.js (svg) path directionality vs. marker-end, hive plots

svg

d3.js

path

trigonometry

markers