d3 与 vue.js 组件的集成

Question

我正在尝试将 D3 与 vue.js 集成。

我正在遵循这个简单的指南：https://bost.ocks.org/mike/bar/

指南要求为每个新栏附加一个新 div。

我已经完成了与自定义指令的集成，在附加的 sn-p 中。

我想使用 vue.js 的强大功能，而不是追加新的 div，我想用 props 追加新的组件...

如何从指令中添加新组件？

var app = new Vue({
  el: '#app',
  data: {
    array: [4, 8, 15, 16, 23, 42]
  },
    directives: {
    chart: {
      bind(element, array) {
        d3.select(element)
          .selectAll('div')
          .data(array.value)
          .enter()
          .append('div')
          .style('width', barValue => {
            return barValue * 10 + 'px'
          })
          .text(barValue => {
            return barValue
          })
      }
    }
  }
})

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://unpkg.com/vue@2.3.4"></script>
<div id="app">
   <div v-chart="array" class="chart">
  </div>
</div>

Answer 1

在 Vue 2 中，指令用于 DOM manipulation。

请注意，在 Vue 2.0 中，代码重用和抽象的主要形式 是组件 - 但是在某些情况下您可能只需要一些 对普通元素的低级 DOM 访问，这是自定义的地方 指令仍然有用。

您不应该从指令中添加组件。如果您要使用指令绘制图表，那么您现在正在做的就是您可能会怎么做。

但是，在 Vue 2 中，您确实应该在组件中执行此操作。

在这种情况下 D3 是不必要的，因为 D3 所做的只是添加一些 div 元素。这很容易通过一个组件来完成。

console.clear()

Vue.component("bar-chart", {
  props: ["chartData", "scale"],
  template: `
    <div>
      <div v-for="item in chartData" :style="{width: item * scale + 'px'}" class="chart">{{item}}</div>
    </div>
  `
})


new Vue({
  el: "#app",
  data: {
    array: [4, 8, 15, 16, 23, 42]
  },
})

.chart {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <bar-chart :chart-data="array" scale="10"></bar-chart>
</div>

如果你被 D3 卡住了，我仍然不太可能使用指令执行此操作，而是使用组件。

console.clear()

Vue.component("bar-chart", {
  props:["chartData"],
  template:`<div class="chart"></div>`,
  mounted(){
    d3.select(this.$el)
          .selectAll('div')
          .data(this.chartData)
          .enter()
          .append('div')
          .style('width', barValue => {
            return barValue * 10 + 'px'
          })
          .text(barValue => {
            return barValue
          })
  }
})


new Vue({
  el:"#app",
  data: {
    array: [4, 8, 15, 16, 23, 42]
  },
})

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <bar-chart :chart-data="array"></bar-chart>
</div>