Published
Edited
Oct 11, 2019
4 forks
Importers
Insert cell
Insert cell
Insert cell
chart = {
const [rootdiv, svg, g] = initChart();
drawing_borders(svg, g); // if necessary
g.attr("viewBox", [dim.mid.nW, dim.mid.nH, dim.W, dim.H]); //centering coordinates in g

// code

let bt = d3.select(button2)
.on('click', test_handler);
rootdiv.appendChild(button2);
rootdiv.appendChild(svg.node());
return rootdiv;
}
Insert cell
test_handler = (e) =>{
// console.log(e);
//alert(e);
debugger;
// I have here a global event variable with target == button
};
Insert cell
drawing_borders = (svg, g) => {
// toggle svg and g borders on and off
if (border) svg.attr('style', 'border: 1px solid salmon');
if (border) g.append('rect')
.attr('id', 'drawing-border')
.attr('width', dim.gW).attr('height', dim.gH)
.attr('fill', 'none').attr('stroke', 'black').attr('stroke-dasharray', '10 10');
}
Insert cell
initChart = (d=dim) => {
let div = html`<div>`,
svg = d3.select(DOM.svg(d.W, d.H)),
g = svg.append('g').attr('transform', `translate(${d.mgs.r}, ${d.mgs.t})`);
return [div, svg, g]
}
Insert cell
dim = mk_dim()
Insert cell
import {mk_dim} from "e52eb8c1ed8e0b33"
Insert cell
Insert cell
button2 = html`<button>Un bouton</button>`
Insert cell
viewof border = checkbox({
options: [{ value: "toggle", label: "Draw border." }],
value: "toggle"
})
Insert cell
viewof a = slider({
min: 0,
max: 1,
step: 0.01,
format: ".0%",
})
Insert cell
Insert cell
Insert cell

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.
Learn more