Javascript 如何编写从数组返回值的函数？

我创建了这个数组：

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);

---

您可以使用

forEach

方法遍历数组中的每个元素并获取每个元素中的值

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

---

将代码放在括号内，使用

d.x

和

d.y

访问数组中每个元素的坐标。

您可以使用

forEach

方法遍历数组中的每个元素并获取每个元素中的值

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

---

将代码放在括号内，使用

d.x

和

d.y

访问数组中每个元素的坐标。

使用循环访问D3代码中的数据（如中所示）是一个糟糕的想法：这不仅完全没有必要，而且违背了D3数据连接的概念，这会让事情在以后变得很尴尬（如果你试图操纵/改变选择）。如果你想用一个循环来解决这个问题，为什么你要首先使用D3呢？您接受的解决方案完全不是惯用的

你不需要一个循环。只需绑定数据并使用“回车”选项，使用匿名函数的第一个参数访问每个圆的数据：这是D3中著名的

函数（d）

。当你这么做的时候

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

。。。每个元素的数据将传递给

attr

函数。如果您想知道，第二个参数是索引，第三个参数是当前组。此外，参数的实际名称并不重要，只影响其顺序

以下是使用您的数据的示例：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，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 ellipes=svg.selectAll（“法拉第”）
.数据（线条数据）
.输入（）
.append（“椭圆”）
.attr（“cx”，函数（d）{return d.x}）
.attr（“cy”，函数（d）{return d.y}）
.attr（“rx”，5）
.attr（“ry”，5）
.attr（“填充”、“teal”）
使用循环来访问D3代码中的数据（如中所示）是一个非常糟糕的想法：这不仅完全没有必要，而且违背了D3数据连接的概念，而且以后会让事情变得尴尬（如果您试图操纵/更改该选择）。如果你想用一个循环来解决这个问题，为什么你要首先使用D3呢？您接受的解决方案完全不是惯用的

你不需要一个循环。只需绑定数据并使用“回车”选项，使用匿名函数的第一个参数访问每个圆的数据：这是D3中著名的
函数（d）
。当你这么做的时候

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

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

以下是使用您的数据的示例：


var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，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 ellipes=svg.selectAll（“法拉第”）
.数据（线条数据）
.输入（）
.append（“椭圆”）
.attr（“cx”，函数（d）{return d.x}）
.attr（“cy”，函数（d）{return d.y}）
.attr（“rx”，5）
.attr（“ry”，5）
.attr（“填充”、“teal”）
谢谢！函数（d）的目的是什么？“d”代表什么？它做什么？@marcos
forEach
将执行一个函数，作为数组中每个元素的参数，并将数组中的一个元素传递给该函数。在本例中，我们向它传递一个匿名函数（
function（d）{}
），
forEach
将数组中的第一个元素传递给我们的匿名函数，因此
d
现在等于数组中的第一个元素（然后它循环并遍历数组中的每个元素）。然后，您可以运行您的代码并根据
d
是什么来操作它。谢谢！函数（d）的目的是什么？“d”代表什么？它做什么？@marcos
forEach
将执行一个函数，作为数组中每个元素的参数，并将数组中的一个元素传递给该函数。在本例中，我们向它传递一个匿名函数（
function（d）{}
），
forEach
将数组中的第一个元素传递给我们的匿名函数，因此
d
现在等于数组中的第一个元素（然后它循环并遍历数组中的每个元素）。然后你可以运行你的代码，并根据
d
是什么来操作它。好的，我尝试了你的答案，它也起了作用。拥有
svg.selectAll（“法拉第”）
的目的是什么？根据我的理解，要绘制一个椭圆，您需要使用
svg.append（“椭圆”）
，并充分尊重其他用户（这不是针对个人的），我的答案“也不起作用”：我答案中的代码是惯用的D3。关于“法拉第”，因为你可以选择enter selection（）中不存在的东西，所以我在我写的每个S.O.片段中向不同的科学家致敬。而且，正如您所看到的，我们不必在输入选择中使用
selectAll（“椭圆”）
来附加椭圆。@GerardoFurtado First things First，您完全正确，这是一条路要走！但是，关于你获取空选择的方式，我有点不安。我在你的一些报告中看到了你提到的科学家