i'm new to the javascript world. i assume a previous version of d3 allowed an object as the sole argument for attr(), and set the attribute according to the contained properties. now, it i think it assumes that sole argument is the name of an attribute to be queried, so looks it up, and returns it.

the below attempts to retain backwards compatibility (i didn't test that, and don't know if that's needed), but hopefully allow it to work with the current d3 (it appears to work on my system).

{1118} diff node_modules/d3-measure-text/lib/d3-measure-text.js assets/
20c20,21
<   var container = d3MeasureText.d3.select('body').append('svg')
---
>   var container = d3MeasureText.d3.select('body').append('svg'),
>       containerText;
24c25,29
<   container.append('text').attr({x: -1000, y: -1000}).text(text)
---
>   containerText = container.append('text').attr({x: -1000, y: -1000})
>   if (!containerText)
>     containerText = container.append('text').attr("x", -1000).attr("y", -1000)
>
>   containerText.text(text);

cheers.

Hi,

I am downloaded d3-measure-text.js and included <script src="./d3-measure-text.js"></script> in the head section. When I put in my JS code the line var d3MeasureText = require('d3-measure-text'); you suggest, the following error appears:

ReferenceError: require is not defined
var d3MeasureText = require('d3-measure-text');

Best, Fran

i use something called "snowpack" to simplify my life by pulling up older "modularization" techniques to an ES6 level. so, the problem i'm circumventing here may not be general to people using ES6 modules (though i assume it is).

after importing, one can't do d3MeasureText.d3 = d3, as d3MeasureText is "not extensible".

and, iiuc (from Flanagan), import statements, "like function declarations", are "hoisted", so they sort of happen before anything else in the importing .js file gets to run.

so, the effect of doing window.d3 = d3 (in the importing .js file, where d3 is what d3.js is imported as) isn't seen when d3-measure-text.js first runs and sets its own copy of d3MeasureText.d3, even if, textually, the import statement is located after the assignment statement in the importing .js file.

my fix is to rerun the setting of d3MeasureText.d3 inside d3MeasureText() each time the latter is called.

--- 17,35 ----
    if (!text || text.length === 0)
      return {height: 0, width: 0}

!   // imports are, i believe, "hoisted", so user may not have set
!   // this when setting code (below, global scope) first ran
!   d3MeasureText.d3 = d3MeasureText.d3 || globals.d3; 

again, thanks for this bit of code!