0

早上好，

我已经使用 D3 创建了一个和弦图。但是我遇到了一个输出问题，导致在某些版本的 Chrome 中路径呈现不佳。

以下是 D3 生成的有问题路径的示例：

<svg height="1000px" width="1000px">
    <g transform="translate(400,400)">
    <path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path>
    </g>
</svg>

在大多数浏览器中，我看到一条弧线，这是我所期望的。但是在我在 Ubuntu 14.04 上运行 Chrome 版本 36.0.1985.125 的开发机器上，我看到了一个大灰色圆圈顶部的弧线。大圆圈破坏了图表的其余部分。

此路径的 d 属性是否有任何特别问题可能导致浏览器不一致地绘制它？

非常感谢。

这是我在出错时看到的图像： 在此处输入图像描述

4

1 回答 1

2

扩展@jshanley 的评论，路径数据的细分如下（为了便于阅读，修剪了长小数）：

d="M 329,-46
   //Move the pen to the starting point (329,-46)

  A 332.5,332.5 0 0,1 329,-46
   //draw a circular arc (radius in both directions 332.5 with 0 degrees rotation), 
   //in a clockwise direction taking the shortest route (flags 0,1)
   //ending at point (329,-46).

   //In a normal chord diagram, this is the edge of the chord, which follows the
   //arc of the large circle.

   //However, in this case the start and end points are the same 
   //and nothing should be drawn

  Q 0,0 -25,-331
   //draw a quadratic curve to point (-25, -331) using control point (0,0)
   //this is the curve you see, connecting different points on the large circle

  A 332.5,332.5 0 0,1 -25,-331
   //another arc with the same start and end points, which shouldn't be drawn

  Q 0,0 329,-46
   //Another quadratic curve, the exact same shape as the previous one
   //but going back in the opposite direction;
   //this is what causes the curve to look like a single line, no fill

  Z" 
   //close the shape

这是您正在使用的 Ubuntu Chrome 版本中的一个明确错误。无论标志设置是什么，都应该跳过 在同一点开始和结束的路径弧段，因为它们没有明确定义。即使浏览器没有自动跳过它，你会认为他们仍然会尊重“短弧”标志并绘制一个零长度的弧。

如果对特定浏览器版本的支持很重要，则需要在代码中添加错误检查，以便在两端宽度为零时根本不绘制和弦，或手动编辑路径删除空弧命令的数据。

于 2014-10-10T20:42:49.777 回答