Encountering a peculiar behavior while using angularjs and d3js together has brought me here. Check out this Plunker for a demonstration: Plunker
Below is the directive responsible for the main function:
.directive('element1', function() {
return {
restrict: 'E',
replace: true,
template: '<svg></svg>',
link: function (scope, element, attrs) {
var rootElmt = d3.select(element[0]);
rootElmt.append("g")
.selectAll("text")
.data(["Hello World"])
.enter()
.append("text")
.attr("x", 20)
.attr("y", 20)
.text(function(d) {
return d;
});
rootElmt.selectAll("text")[0]
.forEach(function(d) {
console.log("text length: ", d.getComputedTextLength());
});
}
}
});
It's clear that the custom element directive element1 is executing unnecessary tasks, which have highlighted a core issue in a more complex software system that requires this functionality to some degree.
Running the Plunker results in the expected outcome - displaying an SVG text string and logging the result of getComputedTextLength() applied to it. The Plunker utilizes angularjs v1.2.0rc3.
However, switching the script loading clause from 1.2.0rc3 to 1.2.17 (a more recent version) triggers an error where getComputedTextLength is undefined.
This error stems from the properties of the text object: older angular versions provide SVGTextElement objects, while newer versions offer HTMLUnknownElement objects, leading to the absence of the getComputedTextLength method.
Could this be a result of a complex interaction between angularjs and d3? Perhaps my directive code doesn't align with the latest angularjs best practices?
Thank you in advance for your valuable insights!