Question

我创建了这个数组：

<xsl:text/>

现在我想在数组中的坐标上绘制椭圆。如何创建一个可以访问x和y值的函数？功能如何运作？

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}];

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访问数组中每个元素的坐标。

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

2 个答案: