Question

我关注this tutorial。我把它写到了最后一部分，但是根据我的数据，代码不起作用（我稍后会解释）。

到目前为止，这里是JSFiddle代码。我评论了翻转文本以使其有效的部分。

if (d.endAngle > 90 * Math.PI/180) {
   var startLoc     = /M(.*?)A/,        
   middleLoc    = /A(.*?)0 0 1/,
   endLoc       = /0 0 1 (.*?)$/;
   var newStart = endLoc.exec( newArc )[1];
   var newEnd = startLoc.exec( newArc )[1];
   var middleSec = middleLoc.exec( newArc )[1];
   newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd;
}

到目前为止，我还没有理解正则表达式的含义（甚至在此部分之前，如var firstArcSection = /(^.+?)L/;）。唯一的因素应该是角度，然后我们应该将文本旋转180度并再次面向正确的方向围绕弧线。

这是数据：

var donutData = [
        {name: "firstArc", value: 16},
        {name: "secondArc", value: 9},
        {name: "thirdArc",  value: 2},
        {name: "fourthArc", value: 62},
        {name: "fifthArc", value: 23},
        {name: "sixthArc", value: 21}
];

以下是我的问题：如果我更改＆＃34; thirdArc＆＃34;的值，则上面的代码在某些配置中有效。例如，或者如果我改变其他值。有些案例有效，有些案例不合格（endLoc.exec( newArc )[1];未定义）。

我还看到了一个related question，但我不知道是什么导致TEXT在这个JSFiddle的底部被翻转，因为没有关于角度或起点和终点的信息。

我的问题是如何在第一个JSFiddle的下半部分翻转文本，以及正则表达式是什么？

D3.js在甜甜圈的下半部分翻转文本（弧形）

0 个答案: