[Vuejs]-Vue method will not recognize d3 scale as a function

by

3👍

✅

You’ve got the wrong this value inside the each callback function.

If you capture the component this in another identifier from outside the function then you can use that identifier inside the function.

drawDots() {
  const vm = this

  d3.select(".plot-chart-wrapper svg")
    // ... other code
    .each(function(d) {
      const xScale = vm.xScale;
      d3.select(this).attr("cx", xScale(d[4]));
    })

Usually you’d use an arrow function to solve this kind of problem but I’m assuming you need the other this (used in d3.select(this)) to be the this value provided by each.

👤skirtle

1👍

Instead of each, we can also use the attr calls on the selection directly, keeping a reference to the scales in the function:

drawDots() {
  const {xScale, yScale} = this

  d3.select(".plot-chart-wrapper svg")
    // ...
    .attr("cx", d => xScale(d[4])
    .attr("cy", d => yScale(d[0])
👤xy2

Leave a comment