实际上,这可能更像是一个 Javascript 问题,但是由于我在 d3 中编码时遇到了这个问题,并且由于它只出现在 IE9 中,所以我认为它与 d3 用户特别相关。
这是我所做的:我开始将鼠标单击添加到数组中:
daLineArray.push({ x: d3.mouse(this)[0], y: d3.mouse(this)[1] });
通过将结果数组输入 d3.svg.line 生成器,我由此生成了一条路径。这适用于所有浏览器。
然后我通过首先将原始数组映射到一个较短的数组来将路径变成一个多边形:
daLineArrayShort = daLineArray.map(function(d) { return d3.values(d) });
然后将其输入 d3.area 生成器。
这会在所有浏览器中生成一个精细的多边形,除了 IE9,它抱怨点列表没有正确的形式。
老实说,IE9 是对的。
当我以 html 形式检查生成的多边形时,它看起来像这样(在这种情况下,数字是虚构的):
points="10,10,20,20,30,30,40,40,etcetera"
虽然我猜它应该是这样的:
points="10,10 20,20 30,30 40,40 etcetera"
换句话说,在需要空格的坐标对之间有一个逗号。
我之前注意到了这一点,但是当我在 IE9 中测试我的工作时,我才意识到这是一个问题。
所以,我的问题是:如何生成正确解析的数组?
(我确实尝试将点直接推到 上daLineArrayShort
(.push([d3.event.pageX, d3.event.pageY])
,但这也没有产生正确的点列表 - 逗号一直在支撑。)