Published unlisted
Edited
Jul 22, 2022
d3.attrTween Debugging
{
const duration = 5000;
const axisX = d3.select(".xAxis>.xAxisBottom>.domain");
const axisXLen = axisX.node().getTotalLength();
//
////////////////////////////////////////////////////////////
//////////////////////// Axis transition////////////////////
////////////////////////////////////////////////////////////
axisX
.attr("stroke-dasharray", function () {
return `0 ${axisXLen}`;
})
.transition()
.duration(`${duration}`)
.ease(d3.easeQuadIn)
.attr("stroke-dasharray", function () {
return `${axisXLen} ${axisXLen}`;
});
////////////////////////////////////////////////////////////
//////////Axis gridline transition with tranition.attr//////
////////////////////////////////////////////////////////////
///****WORKS PERFECTLY*****///
/*
d3.selectAll(".xAxis>.xAxisBottom>.tick>line")
.attr("y2", "0")
.transition()
.duration(3000)
.ease(d3.easeLinear)
.delay(function () {
const child = this;
const parent = this.parentNode;
const p = parent
.getAttribute("transform")
.match(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm);
const b = axisX.node().getPointAtLength(axisXLen * 0).x;
const c = axisXLen;
const elapsedTimePct = Math.sqrt((p - b) / c);
return `${duration}` * elapsedTimePct;
})
.attr("y2", "-550"); //NEEDS HARDCODING
*/
////////////////////////////////////////////////////////////
//////Axis gridline transition with tranition.attrTween/////
////////////////////////////////////////////////////////////
///****DOES NOT WORK AS ABOVE*****///
/*
d3.selectAll(".xAxis>.xAxisBottom>.tick>line")
.transition()
.duration(5000)
.delay(function () {
const child = this;
const parent = this.parentNode;
const p = parent
.getAttribute("transform")
.match(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm);
const b = axisX.node().getPointAtLength(axisXLen * 0).x;
const c = axisXLen;
const elapsedTimePct = Math.sqrt((p - b) / c);
return `${duration}` * elapsedTimePct;
})
.attrTween("y2", function () {
//does not accept arrow function
const start = 0;
const end = this.getAttribute("y2"); //DOES NOT REQUIRE HARDCODING
return d3.interpolate(start, end);
});
*/
//Correction of the above
d3.selectAll(".xAxis>.xAxisBottom>.tick>line")
.each(function (d, i) {
const selection = d3.select(this);
selection.attr("data-t", `${this.getAttribute("y2")}`);
})
.attr("y2", "0")
.transition()
.duration(3000)
.delay(function () {
const child = this;
const parent = this.parentNode;
const p = parseFloat(
parent.getAttribute("transform").match(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm)
);
const b = axisX.node().getPointAtLength(axisXLen * 0).x;
const c = axisXLen;
const elapsedTimePct = Math.sqrt((p - b) / c);
return `${duration}` * elapsedTimePct;
})
.attrTween("y2", function () {
const end = this.getAttribute("data-t");
return d3.interpolate(0, end);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
