How to use the d3-interpolate-path.interpolatePath.bind function in d3-interpolate-path
To help you get started, we’ve selected a few d3-interpolate-path examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tohjustin / coincharts / src / components / Chart / Graph.js View on Github 
const previousAreaGraph = area(previousScaledData);
const previousLineGraph = line(previousScaledData);
const areaGraph = area(scaledData);
const lineGraph = line(scaledData);
graph.selectAll("path").remove();
graph
.append("path")
.attr("class", "area")
.attr("d", previousAreaGraph)
.style("fill", previousColor.fill)
.transition()
.duration(transitionDuration)
.ease(TRANSITION.ease)
.attrTween("d", interpolatePath.bind(null, previousAreaGraph, areaGraph))
.style("fill", color.fill);
graph
.append("path")
.attr("class", "line")
.attr("d", previousLineGraph)
.style("stroke", previousColor.stroke)
.transition()
.duration(transitionDuration)
.ease(TRANSITION.ease)
.attrTween("d", interpolatePath.bind(null, previousLineGraph, lineGraph))
.style("stroke", color.stroke);
}.style("fill", previousColor.fill)
.transition()
.duration(transitionDuration)
.ease(TRANSITION.ease)
.attrTween("d", interpolatePath.bind(null, previousAreaGraph, areaGraph))
.style("fill", color.fill);
graph
.append("path")
.attr("class", "line")
.attr("d", previousLineGraph)
.style("stroke", previousColor.stroke)
.transition()
.duration(transitionDuration)
.ease(TRANSITION.ease)
.attrTween("d", interpolatePath.bind(null, previousLineGraph, lineGraph))
.style("stroke", color.stroke);
}d3-interpolate-path
Interpolates path `d` attribute smoothly when A and B have different number of points.
