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的正确代码?

答案

attrd3函数采用值或函数。在你的例子中,你传递一个常量值(它应该是一个函数的主体)。

因此,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:替代背景颜色并逐渐增加列表元素的宽度

D3的简单语法

D3 入门笔记

html D3:render,.selectAll,.data,.append,selector.text:渲染文本元素,然后替换元素