将SVG路径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 个字符：

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的数组，

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.

EDIT ：
您希望能够访问 lineData ，您可以将其作为数据添加到组，然后将路径附加到组，将文本附加到组。 p>

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路径d属性转换为点数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！