BTS项目第3课-使用D3.js显示图像

根据按钮更改图像。 使用D3.js更新模式

上一课

  • 第1课:项目设置
  • 第2课:显示文本数据

学习资源

  • 本课程的完整代码(#3)
  • 第3课的现场演示

评论

总览

  • 修改showImage函数中的代码
  • 创建变量imageFile并根据所按下按钮的值将其分配给磁盘上的图像文件名
  • 应用D3.js数据更新模式

图案

注意:我们使用6步数据更新模式进行练习。 由于您要更新的数组中只有一个数据元素,因此您可以在实际项目中使用一种更简单的方法

  1. selectimageselectAll('...')的结果分配给名为images的常量
  2. data —将data命令链接到上面的行。 数据是一个名为holding imageFile的单元素数组。 用.data([...]);将数组绑定到常量images .data([...]);
  3. exit —链接到常量images添加.remove()以删除原始图像文件。 示例: images.exit().remove()
  4. 更新 —链接到恒定images 。 更新不是关键字命令。 这是更新过程中已更改数据的步骤。 更改的主要数据是要显示的图像文件的位置。 示例: images.attr('xlink:href', location of file')
  5. 输入链到恒定images
  6. append —链附加到上面的行。 要附加的HTML元素是image示例: .append('image'

图像属性

  • x:300
  • y:50
  • 高度:150
  • 宽度:150
  • xlink:href:文件位置

添加过渡。

下一课

第4课-统计图表设置