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

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代码中使用循环来访问数据(如在接受的答案中)是一个可怕的想法:不仅这是完全没必要的,而且它违背了D3数据连接的概念,并且它将使以后的事情变得尴尬(如果你试图操纵/改变那个选择).如果你用循环解决这个问题,为什么你首先使用D3？您接受的解决方案完全不是惯用的.

你不需要循环.只需绑定数据并使用"输入"选项,使用匿名函数的第一个参数访问每个圆的数据:这就是function(d)D3中的名字.当你这样做......

.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>