DEV Community

Discussion on: Binding Data to Charts using Vue Components and D3

Collapse
 
ignoreintuition profile image
Brian Greig

Definitely agree on the recommendation to pull in only those dependent modules.

Regarding JSX I assume that is easier / harder based on your familiarity with the syntax.

Collapse
 
denisinvader profile image
Mikhail Panichev

Oh and of course some features are simpler with d3 selections - animations and transition for example

Collapse
 
denisinvader profile image
Mikhail Panichev

You haven't to use JSX, you can use vue templates, but JSX is a little more flexible. The idea is to use

<path
  :d="lineShape(data)"
  stroke="red"
/>

<!-- or d={this.lineShape(this.data)} in jsx -->

Instead of

d3.select(this.$el).append('path')
  .attr('d', this.lineShape(this.data)
  .attr('stroke', 'red')
;

I think html/svg is more readable