你如何编写一个从数组返回值的函数？

Question

我创建了这个数组：

var lineData = [ { "x": 25,   "y": 75},  { "x": 85,   "y": 130},
             { "x": 140,  "y": 190}, { "x": 195,  "y": 245},
             { "x": 195,  "y": 300}, { "x": 25,  "y": 350},
             { "x": 80,  "y": 405}, { "x": 195,  "y": 460}];

现在我想在数组中的坐标上绘制椭圆。如何创建将访问 x 和 y 值的函数？函数是如何工作的？

// Draw ellipses 
var circle = svgContainer.append("ellipse")
    .attr("cx", function(d) { return d.x; }})
    .attr("cy", function(d) { return d.y; })
    .attr("rx", 5)
    .attr("ry", 5);

Answer 1

在 D3 代码中使用循环访问数据（如在 accepted answer 中）是一个可怕的想法：这不仅完全没有必要，而且违背了 D3 的概念数据连接，以后会变得很尴尬（如果您尝试操纵/更改该选择）。如果您将通过循环解决此问题，那么您为什么首先使用 D3？您接受的解决方案是完全非惯用的。

您不需要循环。只需绑定数据并使用“输入”选择，使用匿名函数的第一个参数访问每个圆的数据：这就是 D3 中著名的function(d)。当你这样做时......

.attr("cx", function(d){ return d.x})
//first parameter ---^

... 每个元素的数据将传递给attr 函数。如果您想知道，第二个参数是索引，第三个参数是当前组。此外，参数的实际名称并不重要，重要的是它的顺序。

这是一个使用您的数据的示例：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 500);
  
var lineData = [ { "x": 25,   "y": 75},  { "x": 85,   "y": 130},
  { "x": 140,  "y": 190}, { "x": 195,  "y": 245},
  { "x": 195,  "y": 300}, { "x": 25,  "y": 350},
  { "x": 80,  "y": 405}, { "x": 195,  "y": 460}];
             
var ellipses = svg.selectAll("faraday")
  .data(lineData)
  .enter()
  .append("ellipse")
  .attr("cx", function(d){ return d.x})
  .attr("cy", function(d){ return d.y})
  .attr("rx", 5)
  .attr("ry", 5)
  .attr("fill", "teal");

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

您可以使用forEach 方法遍历数组中的每个元素并获取每个元素中的值。

lineData.forEach(function(d) {
    // Draw an elipse
});

将您的代码放在括号内，使用d.x 和d.y 访问数组中每个元素的坐标。