D3:在selectAll中获取元素属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3:在selectAll中获取元素属性相关的知识,希望对你有一定的参考价值。
<html>
<svg></svg>
<script src="d3.v4.min.js"></script>
<script>
var svg = d3.select("svg")
.attr("width", 1000)
.attr("height", 500)
;
for (var i=0;i<3;i++) {
svg.append("rect")
.attr("x",i*80)
.attr("y",i*40)
.attr("width",30)
.attr("height",30)
;
}
svg.selectAll("rect")
.transition()
.duration(500)
.attr("x",2*d3.select(this).attr("x"))
;
</script>
</html>
d3.select(this).attr("x")
的行返回错误。那么,哪个是读取每个元素的x
attr的正确代码?
答案
attr
的d3
函数采用值或函数。在你的例子中,你传递一个常量值(它应该是一个函数的主体)。
因此,d3.select(this)
将在任何this
在范围内运作,很可能是global
对象。而是将它包装在一个像这样的函数中:
.attr("x", function() { 2 * d3.select(this).attr("x"); })
或者,您可以使用以下方法(取决于版本)
.attr("x", (d, i, elements) => 2 * d3.select(elements[i]).attr("x"));
请注意,目前您还没有对x
值应用任何保护,我会认真考虑在尝试对其进行任何算术之前通过parseFloat()
抛出它。
以上是关于D3:在selectAll中获取元素属性的主要内容,如果未能解决你的问题,请参考以下文章
选择 null:D3 中 selectAll(null) 背后的原因是啥?
html D3:选择器,d3.select,.selectAll,.data:向DOM元素添加数据
html D3:d3.selectAll,。style:替代背景颜色并逐渐增加列表元素的宽度
html D3:render,.selectAll,.data,.append,selector.text:渲染文本元素,然后替换元素