vue2写一个简单的横向的D3组件treemap树状图

当然，以下是一个使用Vue 2和D3.js创建简单横向treemap树状图组件的示例代码：

<template>
  <div ref="chartContainer"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    // 数据示例
    const data = {
      name: 'Root',
      children: [
        { name: 'A', value: 10 },
        { name: 'B', value: 20 },
        { name: 'C', value: 15 },
        { name: 'D', value: 25 }
      ]
    };

    // 创建treemap布局
    const treemap = d3.treemap()
      .size([500, 300])
      .padding(1);

    // 构建层次数据
    const root = d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.value - a.value);

    // 计算treemap布局
    treemap(root);

    // 创建SVG容器
    const svg = d3.select(this.$refs.chartContainer)
      .append('svg')
      .attr('width', 500)
      .attr('height', 300);

    // 创建矩形元素
    const cells = svg.selectAll('g')
      .data(root.leaves())
      .enter()
      .append('g')
      .attr('transform', d => `translate(${d.x0},${d.y0})`);

    cells.append('rect')
      .attr('width', d => d.x1 - d.x0)
      .attr('height', d => d.y1 - d.y0)
      .style('fill', 'steelblue');

    cells.append('text')
      .attr('x', 5)
      .attr('y', 15)
      .text(d => d.data.name)
      .style('fill', 'white');
  }
};
</script>

<style scoped>
svg {
  background-color: #f2f2f2;
}
</style>

这个组件会创建一个大小为500x300的横向treemap树状图，其中矩形表示数据的层次结构，矩形的大小和颜色表示数据的值。你可以根据需要修改数据和样式。

希望这个简单的示例能帮到你！如果有任何问题，请随时提问。