【问题标题】:d3.js (svg) path directionality vs. marker-end, hive plotsd3.js (svg) 路径方向性与标记端,蜂巢图
【发布时间】:2015-04-18 02:50:26
【问题描述】:

场景:

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

问题来源:

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

问题影响

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

归结为

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

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

我发现d =“M 8.32759823420202001C-15,-136 C 101.067696264925604734338,14396013962659208777338139608777338442470473381442470473389039877338144247047338144247047338999647047333844291205938996047733844247047338442470473384496977333844201996265959999638939603962399964205965442”“4”,“” P>

这给了我一个很好的路径,从顶部开始,然后向下绘制(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”在数学上使其绘制“另一种方式”。我在三角方面还不够好,不知道这是否有意义。非常欢迎任何关于路径方向性和标记的 cmets 和解决方案!

谢谢

【问题讨论】:

    标签: svg d3.js path trigonometry markers


    【解决方案1】:

    似乎可以通过切换参数来完成。上面的 d 由 hive plot 算法创建,结果是一个 moveto 和一个 curveto (bezier),格式为 M x y C x1 y1 x2 y2 x y。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-11-26
      • 2013-03-13
      • 2021-02-08
      • 1970-01-01
      • 2019-08-25
      相关资源
      最近更新 更多