根据按钮更改图像。 使用D3.js更新模式
上一课
- 第1课：项目设置
- 第2课：显示文本数据
学习资源
- 本课程的完整代码（＃3）
- 第3课的现场演示
评论
总览
- 修改
showImage函数中的代码 - 创建变量
imageFile并根据所按下按钮的值将其分配给磁盘上的图像文件名 - 应用D3.js数据更新模式
图案
注意：我们使用6步数据更新模式进行练习。 由于您要更新的数组中只有一个数据元素，因此您可以在实际项目中使用一种更简单的方法
- select —
image将selectAll('...')的结果分配给名为images的常量 - data —将data命令链接到上面的行。 数据是一个名为holding
imageFile的单元素数组。 用.data([...]);将数组绑定到常量images.data([...]); - exit —链接到常量
images添加.remove()以删除原始图像文件。 示例：images.exit().remove() - 更新 —链接到恒定
images。 更新不是关键字命令。 这是更新过程中已更改数据的步骤。 更改的主要数据是要显示的图像文件的位置。 示例：images.attr('xlink:href', location of file') - 输入链到恒定
images - append —链附加到上面的行。 要附加的HTML元素是
image示例：.append('image'
图像属性
- x：300
- y：50
- 高度：150
- 宽度：150
- xlink：href：文件位置
添加过渡。
下一课
第4课-统计图表设置
