Question

在以下链接中，Mike Bostock展示了“保证金公约”：

（描述保证金公约的整页是here。）

在Chrome（版本53.0.2785.143 m）中，当我进入开发者窗口时（按F12），我在控制台中收到以下错误消息：

d3.v3.min.js:1 Error: <marker> attribute markerWidth: A negative value is not valid. ("-6")i @ d3.v3.min.js:1

http://bl.ocks.org/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

当我将同一页面加载到Firefox并按F12时，我没有收到任何错误消息。这可能表明Chrome正在标记不存在的错误，但根据我的经验，当Chrome标记错误时，确实存在错误。但是，我愿意相信其他人对Chrome的信任。

我目前正在使用Margin Convention代码，我想在无错状态下开始使用它。有谁知道为什么这些消息出现在Chrome中以及如何修复它们？

Answer 1

错误，因为规范有markerWidth：

负值是错误（请参阅错误处理）。

但是，它仅适用于defs部分中定义的小标记三角形。其余的代码没有进一步的错误。要摆脱错误，您只需将markerWidth的设置从-6更改为+6。

defs.append("marker")
    .attr("id", "triangle-start")
    .attr("viewBox", "0 0 10 10")
    .attr("refX", 10)
    .attr("refY", 5)
    .attr("markerWidth", 6)    // Turn -6 into +6 on this line
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M 0 0 L 10 5 L 0 10 z");

事实证明，上面将消除错误，但也会翻转下边界的箭头。将-6用于markerWidth似乎只是一个肮脏的黑客来翻转箭头。最简单的方法是完全删除triangle-start并使用triangle-end标记。您只需在该行上切换y1和y2的值：

svg.append("line")
    .attr("class", "arrow")
    .attr("x1", innerWidth / 2)
    .attr("x2", innerWidth / 2)
    .attr("y2", innerHeight - padding.bottom)   // previous y1
    .attr("y1", innerHeight)                    // previous y2
    .attr("marker-end", "url(#triangle-end)");  // use marker-end like all other lines
//    .attr("y1", innerHeight - padding.bottom)
//    .attr("y2", innerHeight)
//    .attr("marker-start", "url(#triangle-start)");

看看这个工作example。

保证金公约错误？

1 个答案: