🏠 back to Observable

What does DOM.uid("xxx") do?

Help
#1

I am trying to understand the Zoomable Area Chart so that I can build one in regular javascript / d3.

The line const clip = DOM.uid(“clip”); apparently (according to https://github.com/observablehq/stdlib/blob/master/README.md#dom) creates a unique identifier which seemingly has an id within in.

How do I do this in a non observable world?

chart = {
const zoom = d3.zoom()
.scaleExtent([1, 32])
.extent([[margin.left, 0], [width - margin.right, height]])
.translateExtent([[margin.left, -Infinity], [width - margin.right, Infinity]])
.on(“zoom”, zoomed);

const svg = d3.create(“svg”)
.attr(“viewBox”, [0, 0, width, height]);

const clip = DOM.uid(“clip”);

svg.append(“clipPath”)
.attr(“id”, clip.id)
.append(“rect”)
.attr(“x”, margin.left)
.attr(“y”, margin.top)
.attr(“width”, width - margin.left - margin.right)
.attr(“height”, height - margin.top - margin.bottom);

does.

Could someone help explain? Also, is Infinity an Observable term?

Thanks,

Chris.

#2

Infinity is not specific to Observable: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity

DOM.uid: you can depend on Observable’s stdlib library, or copy the code: https://github.com/observablehq/stdlib/blob/master/src/dom/uid.js which “just” increments a singleton variable and returns a string based on its value

#3

Thanks @severo

1 Like