chart = { const svg = d3.select(DOM.svg(width, height)); const tooltop_offset = 10; // tooltip invoked on mouseover const tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("width",tooltip_width) ; const tooltip_pos_x = function(pageX) { const max_x = width - margin.left - tooltip_width return pageX > max_x - tooltop_offset ? max_x + tooltop_offset : pageX + tooltop_offset }; const tooltip_pos_y = function(pageY) { return pageY + tooltop_offset }; svg.append("g").call(xAxis); svg.append("g").call(yAxis); // manuf rows const segment = svg.append("g") .style("font", "bold 16px sans-serif") .selectAll("g") .data(series) .enter().append("g") .attr("transform", (d, i) => `translate(${margin.left}, ${i * size + margin.top})`) ; // row banding segment.append("rect") .attr("x", 0) .attr("y", 0) .attr("width",`${width}`) .attr("height",`${size}`) .attr("fill",(d, i) => (i % 2) == 0 ? "#fff" : "#f2f2f2" ); // year lines segment.each(function(d, i) { d3.select(this) .append("path") // .datum(d.values.filter(v => v.date > new Date("1929"))) .datum(d.values) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) }); // invisible bars to catch mouseover for tooltip segment.each(function(d, i) { let manuf = d.key d3.select(this) .append("g") .attr("fill-opacity", 0) .selectAll("rect") // .data(d.values.filter(v => v.year > "1929")) .data(d.values).enter().append("rect") .attr("x", d => x(d.key) - x.bandwidth() / 2) // changed .attr("y", d => 0) .attr("height", d => y(0)) .attr("width", x.bandwidth()) .on("mouseover", function(d) { d3.select(this).attr("fill-opacity", .1) tooltip.style("visibility", "visible") .html(` ` ) tooltip_chart( top_manuf_year_models(manuf, d.key, 10) ) }) .on("mousemove", function() { tooltip.style("left",tooltip_pos_x(d3.event.pageX)+"px").style("top", tooltip_pos_y(d3.event.pageY)+"px") }) .on("mouseout", function() { d3.select(this).attr("fill-opacity", 0) tooltip.style("visibility", "hidden") }) }); // Manufacturer name and total segment.append("text") .attr("transform", (d, i) => `translate(${margin.left + 80}, ${size / 2})`) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .text(d => d.key); segment.append("text") .style("font", "normal 16px sans-serif") .attr("transform", (d, i) => `translate(${margin.left + 90}, ${size / 2})`) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .text(d => num_format(d.total)); // callout 1946 count segment.append("text") .datum(d => d.values.filter(v => v.key > "1945")[0]) // changed .style("font", "normal 12px sans-serif") .attr("fill", "darkslategrey") .attr("stroke-width", 1.5) .attr("x", d => x(d.key)) // changed .attr("y", d => y(d.value) - 10) .attr("dy", "0.35em") .attr("text-anchor", "start") .text(d => num_format(d.value)) return svg.node(); }