每个D3js初学者都必须经历这个想法,我非常确定.
我已经在这个事情几个小时现在!!!!但是我不知道如何使用它,它们之间有什么区别？
function(d){return d}
function(d,i){return d and some more custom code}
例如—>
var data = [4,8,15,16,23,42];
Function(d):::::
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width",function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
------------------------------------------------------------------------------------
Function(d*i):::::
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y",function(d,i) { return i * 20; })
.attr("width",x)
.attr("height",20);
解决方法
你的例子是两个不同之处的好插画师.
在第一个例子中,只使用d. d表示与给定选择相关联的数据.在这种情况下,将创建一个选定的div元素的数组,一个数据数组中的每个元素：
chart.selectAll("div")
.data(data)
.enter()
.append("div")
这不仅创建了一个div元素的数组,而且将数据与这些元素中的每一个相关联.这是以一对一的方式完成的,每个div对应于数据数组中的单个元素.一个与’4’相关联,一个与’8’相关联,依此类推.
如果我继续在选择数组上使用.text(function(d){…}),d将引用与每个选定div相关联的数据,因此如果在我的选择上使用以下方法：
.text(function(d) { return d; });
我的每个div都将添加文本,其值为d或与元素相关联的数据.
当创建一个选择数组时,它们也会在数组中给出一个索引.在您的示例中,这对应于数据在数据数组中的位置.如果你的函数要求d和i,那么我将对应于这个索引.回到我们的div,与’4’相关联的div将具有’0’的索引,’8’将具有’1’的索引,等等.
还要注意,请求变量中使用的字符并不重要.函数调用中的第一个变量始终是数据,第二个是索引.如果我使用了一种方法
.text(function(cat,moose){ return( "data is: " + cat + " index is: " + moose)})
猫将对应于选择的数据,而驼鹿将对应于索引.