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

时间:2015-02-17 11:55:20

标签: svg d3.js path trigonometry markers

情境:

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

问题来源:

我正在使用d3.hive.v0.js“附加组件”,并且由于Hive Plots图表本身并未在链接上携带任何视觉方向性信息,因此附加组件不依赖于源和关于绘制路径的方向性的目标节点,并且始终顺时针绘制路径,因此当捕捉到标记端时,始终指向左侧节点的方向。

问题影响

指针是不可靠的,因为标记所遵循的路径“结束”不是必须在目标处,而是可能位于源,取决于源和目标相对于彼此的位置。

归结为

我知道我可以使用我自己的Arc绘制自己的链接并获得更多控制权,而不是使用d3 Hive Plot库链接,我已经尝试过了,但它并不容易变得漂亮,并且Hive Plot算法很漂亮,我想用它。

假设我从Hive Plot链接路径算法返回时拦截d。

我发现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上做某事来“逆转线的绘制方向”? , - 使“路径结束”成为该行的顶端,并使标记端到达此处,有效地使链接指向另一个方向。

该线应在视觉上相同,但在另一端仅在逻辑上“开始”。

父小提琴http://jsfiddle.net/hwehqhtm使用两个不同的标记开始和结束,但是我必须在一些标记结束和标记开始回调中包含新逻辑以关闭它们,我真的更喜欢如果可能的话,通过“逆转d”,以数学的方式使它“画另一种方式”。我不太了解trig,知道这是否有意义。任何关于路径方向性和标记的评论和解决方案都非常受欢迎!

THX

1 个答案:

答案 0 :(得分:0)

似乎可以通过切换参数来完成。由蜂巢绘图算法创建的上述d结果是格式为M x y C x1 y1 x2 y2 x y的moveto和curveto(bezier)。

enter image description here

要反转曲线,将C中的端点x,y切换为起始点x,y为M,然后将bezier控制点x1,y1切换为x2,y2似乎是这样做的。