三、使用d3创建一个表格演示绑定函数数据的用法与使用时机

绑定函数数据的作用和使用时机

分解父选择集的数据，给子选择集设置数据

如下代码中，父选择集是tr,父选择集的数据是如下的二维数组，需要将二维数组中的每个元素值设置到td中（这个td就是子选择集）

[
  ['张三', 12, 1],
  ['李四', 13, 2],
  ['王五', 14, 1],
]

代码

<!--
TODO: 编写组件说明
@author pan
@date 2022-04-29
-->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { select, selectAll } from 'd3-selection'
const myContainerRef = ref<HTMLDivElement>()
const dataHeaderArr = ['姓名', '年龄', '性别']
const dataArr = [
  ['张三', 12, 1],
  ['李四', 13, 2],
  ['王五', 14, 1],
]

onMounted(() => {
  const containerDom = myContainerRef.value as HTMLDivElement
  const table = select(containerDom).append('table')
  table
    .append('thead')
    .append('tr')
    .selectAll('th')
    .data(dataHeaderArr)
    .enter()
    .append('th')
    .style('width', '100px')
    .text(dataItem => dataItem)
  table
    .append('tbody')
    .selectAll('tr')
    .data(dataArr)
    .enter()
    .append('tr')
    .selectAll('td')
    .data(dataItem => {
      console.log('dataItem', dataItem)
      return dataItem
    })
    .enter()
    .append('td')
    .style('width', '100px')
    .style('text-align', 'center')
    .text(dataItem => dataItem)
})
</script>

<template>
  <div class="myDiv">
    <h3>表格</h3>
    <div ref="myContainerRef"></div>
  </div>
</template>

<style lang="scss" scoped>
.myDiv {
  margin-left: 30px;
}
</style>

效果