根据我的代码,看起来key_square和key_line分区应该是key_row的兄弟元素,因为我将它们附加到分区"key",但它们是key_row的后代.
有人可以向我解释一下吗？
谢谢,
<body>
<div id="timeseries">
</div>
<div id="key">
</div>
<script>
var key = d3.select("#key")
.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class","key_row")
.attr("id",function (d){ return d.line_id;})
//add square
key.append("div")
.attr("class", "key_square")
.style("background-color","#C8DAF8")
//d3.select("#key")
key.append("div")
.attr("class","key_id")
.attr("id","key_line")
.style("background-color","#E9F0FC")
.text(function (d) { return d.line_id;});
sai*_*vsk 16
让我们一个一个地讨论代码,第一个
var key = d3.select("#key")
.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class","key_row")
.attr("id",function (d){ return d.line_id;})
在上面的代码中我们选择了div使用id,在这里附加div这里根据数据的长度创建div的数量,然后我们指定这些div的类和id,执行这些代码后d3将返回一个包含这些div的数组,所以现在变量键包含这些新创建的div.如果你想在上面的代码之后看到写一个console.log(key)stmt.
第二
key.append("div")
.attr("class", "key_square")
.style("background-color","#C8DAF8")
这里我们将div附加到key,意味着这个append函数在一个div上被调用,这个div由key持有,所以在执行这个代码后,div作为后代创建在上面创建的div中.
第三
key.append("div")
.attr("class","key_id")
.attr("id","key_line")
.style("background-color","#E9F0FC")
.text(function (d) { return d.line_id;});
这里也是同样的事情,我们再次在最初创建的div上调用append函数,所以同样的事情也会在这里发生.div作为后代添加到最初创建的div中.
这就是它的工作原理.我可以这么说.如果有任何错误指向它.谢谢
| 归档时间： |
|
| 查看次数： |
20235 次 |
| 最近记录： |