在不直接操作 DOM 的情况下绘制 d3 轴

Question

有没有办法在不直接操作 DOM 的情况下使用 d3 轴？ D3.js 在用于辅助功能时很好地补充了 Vue.js（尤其是

d3-scale

）。

我目前正在使用一个简单的 Vue 模板来生成 SVG。 为了生成轴，我首先创建一个

<g ref="axisX">

元素，然后调用

d3.select(this.$refs.axisX).call(d3.axisBottom(this.scale.x))

。

我想避免使用

d3.select

来防止直接 DOM 修改。它运行良好，但与 Vue.js 的作用域样式冲突。

有没有一种方法可以访问

d3-axis

而无需从 DOM 元素调用它？独立访问其

path

生成函数而不是通过 DOM 会很有用。

这里是一个 CodePen 示例：https://codepen.io/thibautg/pen/BYRBXW

Answer 1

这种情况需要自定义指令。自定义指令允许您在它们所附加的元素内操作 DOM。

在本例中，我创建了一个指令，该指令采用哪个轴的参数和计算得出的比例值。根据轴是 x 还是 y，它用

axisBottom

调用

axisLeft

或

scale[axis]

。

不再观看。每当有任何更新时都会调用该指令。如果您愿意，您可以检查

scale

是否与以前的值相比发生了变化。

new Vue({
  el: "#app",
  data() {
    return {
      width: 600,
      height: 400,
      margin: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      },
      items: [
        { name: "a", val: 10 },
        { name: "b", val: 8 },
        { name: "c", val: 1 },
        { name: "d", val: 5 },
        { name: "e", val: 6 },
        { name: "f", val: 3 }
      ]
    };
  },
  computed: {
    outsideWidth() {
      return this.width + this.margin.left + this.margin.right;
    },
    outsideHeight() {
      return this.height + this.margin.top + this.margin.bottom;
    },
    scale() {
      const x = d3
        .scaleBand()
        .domain(this.items.map(x => x.name))
        .rangeRound([0, this.width])
        .padding(0.15);
      const y = d3
        .scaleLinear()
        .domain([0, Math.max(...this.items.map(x => x.val))])
        .rangeRound([this.height, 0]);
      return { x, y };
    }
  },
  directives: {
    axis(el, binding) {
      const axis = binding.arg;
      const axisMethod = { x: "axisBottom", y: "axisLeft" }[axis];
      const methodArg = binding.value[axis];

      d3.select(el).call(d3[axisMethod](methodArg));
    }
  }
});

rect.bar {
  fill: steelblue;
}

<script src="//unpkg.com/vue@2"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<div id="app">
  <svg :width="outsideWidth"
       :height="outsideHeight">
    <g :transform="`translate(${margin.left},${margin.top})`">
      <g class="bars">
        <template v-for="item in items">
          <rect class="bar"
                :x="scale.x(item.name)"
                :y="scale.y(item.val)"
                :width="scale.x.bandwidth()"
                :height="height - scale.y(item.val)"
                />
        </template>
        <g v-axis:x="scale" :transform="`translate(0,${height})`"></g>
        <g v-axis:y="scale"></g>
      </g>
    </g>
  </svg>
</div>