[Vuejs]-How can I cohabitate D3 and React.js or Vue.js?

by

2👍

As you said, I would recommand to use D3 only for mathematic operation and let only Vue or React manipulate the DOM. Now D3 is split in small modules so it’s easier to use it only for computations.

The advantages I see are :

  • Maintainability : someone familiar with Vue or React can understand more easily your component.
  • Need for specific algorithm : you can use other computationnal libraries. For instance I made a contours visualization few months ago and needed marching square algorithm that was not yet implemented in d3.
  • Ability to use web workers because computations and render are clearly separated.

The main drawback is the lack of available example, but this will increase in time.

For your axis problem, you could use something like this (Vue code) :

HTML template in SVG :

<g v-for="(tick, index) in ticks" v-if="tick.v === 0 || tick.v >= 1" opacity="1" :transform="'translate(50,' + (height - tick.sv) + ')'">
   <line stroke="#000" stroke-width="1" x1="0" x2="5"></line>
   <text fill="#000" x="-5" alignment-baseline="central">{{tick.f}}</text>
</g>

JS: 

const d3scale = require('d3-scale')
const d3array = require('d3-array')
const d3format = require('d3-format')

var yScale = d3scale.scaleLinear()
   .domain([0, d3array.max(this.values)])
   .range([0, this.height])

const tickFormat = d3format.format('.2s')
vm.ticks = yScale.ticks(5).map(t => {
  return {
    v: t,
    sv: yScale(t),
    f: tickFormat(t)
  }
})
👤Nicolas Bonnel

Leave a comment