CODEWITHSUNDEEP
javascripttypescriptd3.js
DunBaloo
DunBaloo

Reputation: 71

d3 v5 axis transition

I have a graph in d3 v5, that displays part of a data set at a time and updates it on button presses. The graph content (lines, polygons, circles, images and text) transition just fine, but I can't figure out how to transition axes in d3 v5.

I have tried to follow this tutorial : https://bl.ocks.org/HarryStevens/678935d06d4601c25cb141bacd4068ce

Sadly, it uses d3 v4. I tried to use that syntax for my project, but it seems impossible to use call on a transition in d3 v5.

The problem is this part :

svg.select(".x")
  .transition()
    .call(x_axis);

I get this error :

error TS2345: Argument of type 'Axis<number | { valueOf(): number; }>' is not assignable to parameter of type '(transition: Transition<BaseType, { x: Date; y: number; doubt: number; }[][], HTMLElement, any>, ...'.
Types of parameters 'context' and 'transition' are incompatible.

It goes on a bit, basically it says that the axisBottom function should be applied to a selection and not to a transition.

I have looked around, but everything I find either uses d3 v4 or doesn't mention axis transitions. So : is it possible to transition axes in d3 v5, and if so how ?

Upvotes: 2

Views: 1147

Answers (1)

DunBaloo
DunBaloo

Reputation: 71

Thanks to @Mark, I realized that I was looking at the problem from the wrong perspective. It didn't come from d3 but from Typescript. The axisBottom variable is a function, and Typescript requires it to have a context when used as a callback. Binding this solves that problem, as in :

svg.select(".x")
  .transition()
    .call(x_axis.bind(this));

Upvotes: 5

Related Questions