【问题标题】:Applying stroke-dasharray style to only part of a path仅将 stroke-dasharray 样式应用于路径的一部分
【发布时间】:2016-03-30 11:08:57
【问题描述】:

我有一个普通的 nvd3 折线图。有时图表所代表的数据是不完整的。我希望能够以不同的方式设置 part 行的样式来表示这一点,例如在此示例中:

在这里,当点相距很远时用虚线连接,靠近时用实线连接。是否可以仅将 stroke-dasharray 应用于路径的某些部分,还是我必须欺骗 nvd3 为样式更改的每个段创建一个新行?

【问题讨论】:

    标签: d3.js svg nvd3.js


    【解决方案1】:

    您不能将 stroke dasharray 应用于路径的一部分,但您可以创建一个非常长的 stroke dasharray 等于路径的长度,并在 JavaScript 中仔细计算破折号的位置,以便破折号与您想要虚线的路径部分。

    【讨论】:

    • 几乎 有效并有效地回答了这个问题,尽管在我弄清楚如何计算与给定 x 轴对应的路径长度之前我不能完全正确位置。
    • 段路径长度为两点坐标差平方和的平方根:math.info/Algebra/Distance_Cartesian_Plane
    • 我最终使用了另一个与 DOM 断开连接的路径元素来进行长度计算(因此它也适用于没有直线段的插值)。感谢您的帮助!
    猜你喜欢
    • 2015-03-17
    • 1970-01-01
    • 2019-03-13
    • 2017-08-01
    • 2021-03-26
    • 2013-12-23
    • 2021-01-01
    • 2021-08-08
    • 2016-09-01
    相关资源
    最近更新 更多