unable to get a working implementation of d3-geo-scale-bar from observable to framework ...

[jipexu]

Hi
I transfering my notebooks in framework ...
in one of my notebooks i had this
d3 = require("https://d3js.org/d3.v6.min.js", "d3-geo-projection@2", "[email protected]")

so i have install the two last lib as
jpb@powerbookssdjpb obsframework % npm install d3-geo-scale-bar
and
update the code in the framework as

import * as d3 from "npm:d3"; //probably no need
import * as topojson from "npm:topojson-client";
import * as d3GeoScaleBar from "npm:d3-geo-scale-bar";
import * as d3GeoProjection from "npm:d3-geo-projection";

but when i call as this

const scaleBar = d3
    .geoScaleBar()
    .units(d3.geoScaleMeters)
     ...;

geoScaleBar() is unknown .... where is my mistake (probably in the import line ?)
but in the source code of my page the lib seems to be here ?

so i am lost i dont understand ..

Any help welcome thanks !

[Fil]

Hello,

you probably don't need to do the npm install step, since the import call will download a different copy from npm.

Then, update your import line like so:

import {geoScaleBar} from "npm:d3-geo-scale-bar";

and you can use:

const scaleBar = geoScaleBar().…

[jipexu]

Thanks for your answer. It works perfect now. I have also modified some more details from the old code.
import {geoScaleBar, geoScaleMeters} from "npm:d3-geo-scale-bar";
and use as

  const scaleBar = 
     geoScaleBar()
    .units(geoScaleMeters)
    .projection(projection)
    .size([width, height])
    .left(.02)
    .top(.80)
    .distance(3000)
    .label("3000 m")
    .labelAnchor("middle")
    .tickSize(null)
    .tickValues(null);

where i have removed the d3. at the front of geoScaleBar() and geoScaleMeters ...

Thanks again and happy end of year !