使用“d”在D3中的函数字面量？ [英] use of "d" in function literal in D3?
问题描述
我教自己D3没有太多的javascript语法/语法的知识。
任何人都可以解释使用d作为参数在下面的函数文字？
我看到它指向正在处理的数据集，但想要了解此背后的语法。
d3.selectAll（circle）
.attr（cy，function（d）{return percent_scale （d.late_percent）;}）
.attr（cx，function（d）{return time_scale（d.time）;}）
.attr（r，1）
这称为匿名函数，没有给出命名标签。 JavaScript中的匿名函数是其他对象，这就是为什么你可以将它们作为参数传递给其他javascript函数。
在d3的情况下，它允许你传递在作为第二参数的函数中。正如你所发现的，该函数将使用当前数据元素以及当前数据元素的索引来调用。
在您的示例中：
<$ p如果第二个参数不是函数， $ p>
d3.selectAll（circle）
.attr（cy，function（d）{return percent_scale（d.late_percent）;}）
.attr cx，function（d）{return time_scale（d.time）;}）
.attr（r，1）;
cy 和 cx 正在根据匿名函数调用的返回值分配值，而 r 正在分配一个静态值。我们可以改写为：
函数setY（d）{return percent_scale（d.late_percent）;}
function setX（d）{return time_scale（d.time）; }
d3.selectAll（circle）
.attr（cy，setY）
.attr（cx，setX）
.attr r，1）;
在这里，我使用更多的标准函数定义替换了匿名函数调用，并指定了函数的名称在 d3 调用中调用。这个工作原理与以前完全一样。还要注意，在这种情况下， d 没有什么神奇的。
function setY（foo）{return percent_scale（foo.late_percent）;}
函数setX（foo）{return time_scale（foo.time）; }
d3.selectAll（circle）
.attr（cy，setY）
.attr（cx，setX）
.attr r，1）;
这段代码也会做同样的事情。请注意，我已将参数从 d 重命名为 foo ，但这只是更改了如何访问功能。它在函数调用之外没有效果。通常在 d3 文档和教程中，您将看到 d 用于当前数据元素和 i 用于当前数据元素的索引。该索引作为第二个元素传递给函数调用，如下所示：
函数setY（d，i）{return percent_scale （d.late_percent）;}
函数setX（d，i）{return time_scale（d.time）; }
d3.selectAll（circle）
.attr（cy，setY）
.attr（cx，setX）
.attr r，1）;
现在特别在 d3 / p>
//选择所有的'circle'元素（即< circle>）元素
// HTML文档并将相关数据放入数组
d3.selectAll（circle）
//对于每个圆形元素，将Y位置设置为结果
/ /对数据元素调用percent_scale late_percent
.attr（cy，function（d）{return percent_scale（d.late_percent）;}）
//对于每个圆形元素，设置X位置为结果
//对数据元素的时间调用time_scale
.attr（cx，function（d）{return time_scale（d.time）;}）
//对于每个圆形元素，将半径设置为1
.attr（r，1）;
这是 d3 。第一步总是做一个选择来定义你要修改的元素集（在这种情况下是.selectAll）。之后，您可以将其他调用（在本例中为.attr调用）链接在一起，以实际执行对元素的所需修改。
这将创建一个非常强大的方法使用数据驱动的文档（如图形，图表等），而不必手动跟踪数据元素或必须创建大量的循环。事实上，如果你的代码中有任何处理修改元素的循环，你通常可以告诉你使用 d3 时不正确。
如果您没有使用javascript的经验， https://www.dashingd3js.com/ 的教程可能会有助于开始使用 d3 。
I am teaching myself D3 without too much knowledge on syntax / grammar of javascript. Could anyone explain the use of "d" as a parameter in the following function literal?
I see that it points to the data set being worked on, but want to understand the grammar behind this.
d3.selectAll("circle")
.attr("cy",function (d) { return percent_scale(d.late_percent);})
.attr("cx",function (d) { return time_scale(d.time);})
.attr("r",1);
This is called an anonymous function, which is a function that isn't given a named label. Anonymous functions in Javascript are objects like everything else and this is why you can pass them as parameters into other javascript functions.
In the case of d3, it allows you to pass in a function as the second parameter. As you discovered, this function will be called with the current data element as well as the index of the current data element. If the second parameter is not a function, it can use a value instead.
In your example:
d3.selectAll("circle")
.attr("cy",function (d) { return percent_scale(d.late_percent);})
.attr("cx",function (d) { return time_scale(d.time);})
.attr("r",1);
Both cy and cx are being assigned values based on the return value of an anonymous function call, while r is being assigned a static value. We could rewrite this as:
function setY(d) { return percent_scale(d.late_percent);}
function setX(d) { return time_scale(d.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
Here I've replaced the anonymous function calls with more standard function definitions and specified the name of the function to be called in the d3 call. This works exactly the same as before. Also note that there is nothing magical about d in this case.
function setY(foo) { return percent_scale(foo.late_percent);}
function setX(foo) { return time_scale(foo.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
This code will also do the same thing. Note that I've renamed the parameter from d to foo, but this just changes how you access the parameter within the function. It has no effect outside of the function call. Generally in d3 documentation and tutorials, you'll see d used for the current data element and i used for the index of the current data element. The index is passed in as the second element to the function calls like so:
function setY(d, i) { return percent_scale(d.late_percent);}
function setX(d, i) { return time_scale(d.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
Now specifically in the d3 case:
// Select all of the 'circle' elements (that is <circle>) elements
// in the HTML document and put the associated data into an array
d3.selectAll("circle")
// For each circle element, set the Y position to be the result
// of calling percent_scale on the data element late_percent
.attr("cy",function (d) { return percent_scale(d.late_percent);})
// For each circle element, set the X position to be the result
// of calling time_scale on the data element time
.attr("cx",function (d) { return time_scale(d.time);})
// For each circle element, set the radius to be 1
.attr("r",1);
This is a very common construct in d3. The first step is always to make a selection to define which set of elements you want to modify (this is the .selectAll in this case). After that, you can chain together additional calls (in this case the .attr calls) that actually perform the desired modifications to the elements.
This creates a very powerful method of working with data driven documents (like graphs, charts, etc) without having to track the data elements manually or have to create lots of loops. In fact, you can usually tell you are using d3 incorrectly if you have any loops in your code that deals with modifying elements.
If you don't have much experience with javascript, the tutorials at https://www.dashingd3js.com/ might be helpful for getting started with d3.
这篇关于使用“d”在D3中的函数字面量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
