如何在Vue中不直接操作DOM使用d3-axis生成坐标轴？

这个问题我之前也遇到过——Vue的作用域样式和D3直接操作DOM的方式确实容易打架，毕竟一个是数据驱动DOM，一个是直接操作DOM元素。不过有几个不错的方案可以解决这个问题，既不用完全放弃D3的强大能力，又能贴合Vue的开发习惯：

方案1：用Vue深度选择器穿透作用域样式 #

最直接的解决办法是利用Vue的深度选择器（::v-deep），让你的作用域样式能够覆盖到D3动态生成的元素上。因为Vue的scoped样式会给组件内的元素自动添加data-v-xxx属性，而D3生成的元素没有这个属性，所以默认样式无法生效。

示例代码：

<template>
  <svg width="800" height="400">
    <!-- 保留你的ref元素 -->
    <g ref="axisX" class="axis axis-x" transform="translate(50, 350)"></g>
  </svg>
</template>

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

export default {
  data() {
    return {
      scale: {
        x: d3.scaleLinear().domain([0, 100]).range([0, 700])
      }
    };
  },
  mounted() {
    this.renderAxis();
  },
  methods: {
    renderAxis() {
      const axis = d3.axisBottom(this.scale.x);
      d3.select(this.$refs.axisX).call(axis);
    }
  }
};
</script>

<style scoped>
/* 使用::v-deep穿透作用域，选中D3生成的子元素 */
::v-deep .axis line,
::v-deep .axis path {
  stroke: #ccc;
  shape-rendering: crispEdges;
}

::v-deep .axis text {
  fill: #666;
  font-size: 12px;
}
</style>

方案2：封装D3坐标轴为Vue组件（更符合Vue思想） #

如果想彻底把D3的DOM操作封装起来，避免在业务组件里直接调用d3.select，可以把坐标轴做成独立的Vue组件，通过props传递scale参数，同时内部处理D3的渲染逻辑。

封装AxisX组件 #

<!-- components/AxisX.vue -->
<template>
  <g :class="['axis', 'axis-x']"></g>
</template>

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

export default {
  props: {
    // 接收父组件传递的x轴scale
    scale: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.renderAxis();
  },
  // 监听scale变化，自动更新坐标轴
  watch: {
    scale: {
      handler() {
        this.renderAxis();
      },
      deep: true
    }
  },
  methods: {
    renderAxis() {
      const axis = d3.axisBottom(this.scale);
      // 先清空旧内容，避免重复渲染
      d3.select(this.$el).selectAll('*').remove();
      // 渲染新坐标轴
      d3.select(this.$el).call(axis);
    }
  }
};
</script>

<style scoped>
::v-deep .axis line,
::v-deep .axis path {
  stroke: #ccc;
}

::v-deep .axis text {
  fill: #666;
  font-size: 12px;
}
</style>

在父组件中使用 #

<template>
  <svg width="800" height="400">
    <g transform="translate(50, 350)">
      <!-- 直接传递scale即可 -->
      <AxisX :scale="scale.x" />
    </g>
  </svg>
</template>

<script>
import * as d3 from 'd3';
import AxisX from './components/AxisX.vue';

export default {
  components: { AxisX },
  data() {
    return {
      scale: {
        x: d3.scaleLinear().domain([0, 100]).range([0, 700])
      }
    };
  }
};
</script>

方案3：自定义Vue指令封装坐标轴 #

如果你觉得组件封装有点重，也可以用Vue的自定义指令来封装D3的坐标轴逻辑，让模板写法更简洁：

<template>
  <svg width="800" height="400">
    <!-- 使用v-axis:x指令绑定scale -->
    <g v-axis:x="scale.x" transform="translate(50, 350)" class="axis"></g>
  </svg>
</template>

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

export default {
  directives: {
    axis: {
      // 元素插入DOM时渲染坐标轴
      inserted(el, binding) {
        const axisFn = binding.arg === 'x' ? d3.axisBottom : d3.axisLeft;
        d3.select(el).call(axisFn(binding.value));
      },
      // 当scale更新时重新渲染
      update(el, binding) {
        const axisFn = binding.arg === 'x' ? d3.axisBottom : d3.axisLeft;
        d3.select(el).selectAll('*').remove();
        d3.select(el).call(axisFn(binding.value));
      }
    }
  },
  data() {
    return {
      scale: {
        x: d3.scaleLinear().domain([0, 100]).range([0, 700])
      }
    };
  }
};
</script>

<style scoped>
::v-deep .axis line,
::v-deep .axis path {
  stroke: #ccc;
}
</style>

小提示：完全避免d3.select？ #

说实话，D3的axis方法本身就是基于DOM操作设计的，完全避开d3.select几乎不可能。但上面的方案都把DOM操作封装在了组件或指令内部，业务代码里不用直接接触，既保留了D3的能力，又符合Vue的开发模式。

内容的提问来源于stack exchange，提问作者thibautg