我有一个我看不懂的片段.

var data = [3, 2, 4, 1];

window.onload = async function() {
    d3.select( '#canvas' )
        .selectAll( 'rect' )
        .data( data )
        .join(
            enter => {
                enter.append( 'rect' )
                    .attr( 'x', d => d*50 )
                    .attr( 'width', 20 )
                    .attr( 'height', d=> d*50 )
                    .attr( 'y', 20 )
                    .attr( 'id', d => 'rect' + d )
                    .style( 'fill', 'blue' );
            });
        }

我知道我们正在 Select 画布并 for each 数据点创建一个RECT.我相信我们正在将一个函数传递给seltion.Join(),该函数用于将矩形连接到数据.

传递到传递到Join的函数中的"Enter"是怎样的,又是什么?另外,‘d’是如何传递给其他嵌套的lambda函数的,又是什么呢?

推荐答案

join()有三个参数,每个参数都是处理元素的进入、更新和退出的函数.

您的函数只有一个参数(按照惯例命名为Enter),它是对输入元素的 Select .您也可以用普通语法编写它,一个非箭头函数.

示例:

join(
    function(enter) {
      ...
    },
    function(update) {
      ...
    },
    function(exit) {
      ...
    }
)

若要更新属性,请使用attr().此函数接受两个参数:

  • Attribute Name-例如,"Height"设置SVG的高度.
  • Value or An accessor function.-例如,将高度设置为10的"10"或基于数据设置每个数据点的值的访问器函数(按惯例命名为d).

这个清除器函数可以有两个以上的参数.喜欢:

attr('fill', (d,i,nodes) => ...)
  • 当前项目的索引(根据公约一),以及
  • 所选内容中的 node 组

Javascript相关问答推荐

Phaser框架-将子对象附加到Actor

通过在页面上滚动来移动滚动条

docx.js:如何在客户端使用文档修补程序

如何修复(或忽略)HTML模板中的TypeScript错误?'

仅针对RTK查询中的未经授权的错误取消maxRetries

如何使用JavaScript将文本插入空div

Promise Chain中的第二个useState不更新

如何调用名称在字符串中的实例方法?

简单的PayPal按钮集成导致404错误

用于编辑CSS样式的Java脚本

编辑文本无响应.onClick(扩展脚本)

使用Java脚本导入gltf场景并创建边界框

如何在我的Next.js项目中.blob()我的图像文件?

如何根据查询结果重新排列日期

将promise列表拆分到组.按组并行和顺序执行所有promise

使用Firebase实时数据库`update`在同一 node 上执行多个更新

Oracle APEX-如何调用Java脚本函数

从C#的Angular 来看,Java回调基础知识

Qualtrics联合实验脚本随机化条件

有没有一种方法可以在不定义任何属性的情况下使用CSS转换?