13 javascript d3.js
每个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);
cke*_*sch 13
你的例子是两者之间差异的好插画家.
在第一个示例中,仅d使用.d表示与给定选择相关联的数据.在这种情况下,将div创建一个选定元素的数组,对应于data数组中的每个元素:
chart.selectAll("div")
.data(data)
.enter()
.append("div")
这不仅创建了一个div元素数组,而且还将数据与每个元素相关联.这是一对一地完成的,每个div对应于data数组中的单个元素.一个与'4'相关联,一个与'8'相关联,依此类推.
如果我继续使用.text(function(d){...})选择数组,d将引用与每个选定div相关的数据,所以如果我在我的选择中使用以下方法:
.text(function(d) { return d; });
我div的每个人都会添加文本,其值是d,或与元素相关的数据.
创建选择数组时,它们也会在数组中获得索引.在您的示例中,这对应于数据在数据数组中的位置.如果你的函数同时请求d和i,那么i将对应于这个索引.回到我们的divs,div与'4'相关联的索引为'0','8'的索引为'1',依此类推.
同样重要的是要注意所请求的变量中使用的字符无关紧要.函数调用中的第一个变量始终是数据,第二个变量是索引.如果我使用像这样的方法
.text(function(cat,moose){ return( "data is: " + cat + " index is: " + moose)})
cat将对应于选择的数据,并且moose将对应于索引.
我希望这个例子可以帮到你.这是一个完整的网页,您可以开始播放:
<!doctype html>
<meta charset="utf-8">
<title>my first d3</title>
<body>
<script>
var data=[10,20,30,40];
var lis = d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
lis.enter()
.append("li")
.text(function(d,i){ return "item n° "+i+" has value: "+d})
</script>
基本上d是数据的价值,而且i是他的指数.你可以在这看一下这个例子:http://jsfiddle.net/M8nK8/
| 归档时间： |
|
| 查看次数： |
14466 次 |
| 最近记录： |