当我能够创建以下行:
var lineData = [{ "x": 50, "y": 50 }, {"x": 100,"y": 100}, {"x": 150,"y": 150}, {"x": 200, "y": 200}];
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
var myLine = lineEnter.append("path")
.attr("d", lineFunction(lineData))
现在我想在这个lineArray的第二个点上添加一段文字:
lineEnter.append("text").text("Yaprak").attr("y", function(d){
console.log(d); // This is null
console.log("MyLine");
console.log(myLine.attr("d")) // This is the string given below, unfortunately as a String
// return lineData[1].x
return 10;
} );
console.log(myLine.attr("d"))
行的输出:
M50,50L58.33333333333332,58.33333333333332C66.66666666666666,66.66666666666666,83.33333333333331,83.33333333333331,99.99999999999999,99.99999999999999C116.66666666666666,116.66666666666666,133.33333333333331,133.33333333333331,150,150C166.66666666666666,166.66666666666666,183.33333333333331,183.33333333333331,191.66666666666663,191.66666666666663L200,200
我可以以字符串格式获取路径数据。 我能否将此数据转换回lineData数组? 或者,在附加文本时是否有其他简单的方法来重新生成或获取lineData?
请参考此JSFiddle。
.pathSegList
的undefined
。 - qwwqwwqgetPathData
会返回一个点数组,对吧,MCVHZ 的东西。但是如果 SVG 路径被压缩了,例如h
值没有y
,那么你如何找到 x/y 值呢?你需要循环遍历数组并找到最接近的前一个y
值吗? - Marais Rossouw