Seeking assistance with a Multi Series, Focus + Context D3 chart and hoping to address my main queries all at once.
The questions that need resolving are:
How can I prevent the tooltips I've generated from being affected by the hair-line (which tracks the mouse) of the chart i.e. not disappear but stay visible until the mouse is moved? They should persist as if the hair-line wasn't there or had a different setup.
Data paths seem to be overflowing to the left of the chart instead of being confined within the focus area. How can this issue be fixed? It seems related to the left margin.
When brushing the data, the focus chart updates through the context, but I'm having trouble updating the tooltip content. Can anyone pinpoint what's wrong with the current code?
CSS Styles:
body {
font: 10px sans-serif;
}
.axis path,
.axis path_steelblue {
fill: none;
stroke: #000;
shape-rendering: geometricPrecision;
}
// Other CSS styles remain unchanged for brevity...
D3 Code:
// Rest of D3 code remains untouched.. // Hover line.
var hoverLineGroup = focus.append("g") //svg.append("g") -- Ensures hairline follows mouse pointer put interferes with the tooltip not allowing it to persist until the mouse moves again
.attr("class", "hover-line");