LinePlot = { /*const container = html``; */ const container = Container //const container = Container() const width = 500 const height = 100 const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); const data = d3.pairs(data_synth) // not sure needed console.log(data) const div = d3 .select(container) .append("div") .classed("tooltip", true); // create a new tooltip, // passing it a selection for the tooltip's DOM element. const tooltip = new Tooltip(div); function tooltipContents(datum) { // << PROBABLY SOMETHING WRONG <<<< HOW TO FIX? // Datum is an [a,b] pair, where a and b are (date, close) const [ a, b ] = [datum[0], datum[1]]; const text = `(${a.date}, ${a.close})
(${b.date}, ${b.close})`; return text } svg.append("path") .attr("fill", "None") // necessary for line .attr("stroke", "steelblue") // necessary for line .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data_synth)); /* svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); */ svg.append("g") .attr("fill", "none") // worked // Do not think that pointer-events is required // pointer-events are useful when there are overlapping elements //.attr("pointer-events", "fill") // "none": no tooltips .selectAll("rect") .data(data) .join("rect") // these rectangles are selection regions .attr("x", ([a, b]) => x(a.date)) .attr("height", height) // trick to offer a selection region .attr("width", ([a, b]) => x(b.date) - x(a.date)) .attr('fill','red').attr('opacity','.5') .on("mouseout", () => tooltip.hide()) .on("mousemove", event => tooltip.move(event)) .on("mouseover", (event, d) => {tooltip.display(d, tooltipContents); }) return container }