将 SVG Path d 属性转换为点数组 [英] Convert SVG Path d attribute to a array of points

问题描述

当我可以创建如下一行时:

When I can create a line as follows:

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 的第二个点添加一个文本:

Now I want to add a text to the second point of this 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?

I can get the path data in string format. Can I convert this data back to lineData array? Or, is there any other and simple way to regenerate or get the lineData when appending a text?

请参考这个JSFiddle.

推荐答案

您可以通过拆分 L、M 和C 字符:

You can break the line into individual commands by splitting the string on the L, M, and C characters:

var str = "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"

var commands = str.split(/(?=[LMC])/);

这给出了用于渲染路径的命令序列.每个都是一个字符串，由一个字符(L、M 或 C)后跟一串用逗号分隔的数字组成.它们看起来像这样:

This gives the sequence of commands that are used to render the path. Each will be a string comprised of a character (L, M, or C) followed by a bunch of numbers separated by commas. They will look something like this:

"C66.66666666666666,66.66666666666666,83.33333333333331,
83.33333333333331,99.99999999999999,99.99999999999999"

它描述了一条通过三个点的曲线，[66,66]、[83,83] 和 [99,99].您可以使用另一个 split 命令和一个包含在地图中的循环将它们处理成成对点数组:

That describes a curve through three points, [66,66], [83,83], and [99,99]. You can process these into arrays of pairs points with another split command and a loop, contained in a map:

var pointArrays = commands.map(function(d){
    var pointsArray = d.slice(1, d.length).split(',');
    var pairsArray = [];
    for(var i = 0; i < pointsArray.length; i += 2){
        pairsArray.push([+pointsArray[i], +pointsArray[i+1]]);
    }
    return pairsArray;
});

这将返回一个包含每个命令的数组，作为长度为 2 的数组的数组，每个数组都是路径相应部分中一个点的 (x,y) 坐标对.

This will return an array containing each command as an array of length-2 arrays, each of which is an (x,y) coordinate pair for a point in the corresponding part of the path.

您也可以修改map中的函数，以返回包含命令类型和数组中点的对象.

You could also modify the function in map to return object that contain both the command type and the points in the array.

编辑:如果希望能够访问lineData，可以将其作为数据添加到组中，然后将路径附加到组中，并将文本附加到组中.

EDIT: If you want to be able to access lineData, you can add it as data to a group, and then append the path to the group, and the text to the group.

var group = d3.selectAll('g').data([lineData])
  .append('g');

var myLine = group.append('path')
  .attr('d', function(d){ return lineFunction(d); });

var myText = group.append('text')
  .attr('text', function(d){ return 'x = ' + d[1][0]; });

与对路径进行逆向工程相比，这将是一种更 d3 式的数据访问方式.也可能更容易理解.

This would be a more d3-esque way of accessing the data than reverse-engineering the path. Also probably more understandable.

更多关于 SVG 路径元素的信息

这篇关于将 SVG Path d 属性转换为点数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！