Adding pretransition interferes with legend hover / click - dc.js

Question

I want to modify the default transition on a multi-series chart and managed to achieve it using the "pretransition" event listener, but doing it this way seems to disable the highlighting you get "for free" with the DC legend. Assuming Michelson–Morley experiment data is loaded the usual way my code looks like this:
// MULTI-SERIES LINE CHART
const runDimension = morley.dimension(d => [d.Expt, d.Run]);
const runGroup = runDimension.group().reduceSum(d => d.Speed);
const multiSeries = new dc.SeriesChart("#multi-series");
multiSeries
.width(500)
.height(300)
.chart(cht => dc.lineChart(cht).curve(d3.curveBasis))
.dimension(runDimension)
.group(runGroup)
.keyAccessor(d => d.key[1])
.valueAccessor(d => d.value)
.seriesAccessor(d => d.key[0])
.legend(dc.legend().x(50).y(250).itemHeight(15).gap(5).horizontal(2).legendWidth(500))
.x(d3.scaleLinear().domain([1, 20]));
multiSeries.on("pretransition", function(chart) {
const path = chart.selectAll("path.line");
const totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1000)
.attr("stroke-dashoffset", 0);
});
Is there a way to keep both the custom transition and the legend functionality?

Answer 1

Note: there are three answers below. The first is a red herring, the second is a klunky solution, and the final answer nails it! I'm preserving the false leads because they contain some useful info.
namespacing event listeners
To avoid conflicts, you can add a name as documented in D3's dispatch.on:
The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as start.foo and start.bar.
In your example:
multiSeries.on("pretransition.foo", function(chart) {
Use whatever name you want, as long as it's unique.
Internally, dc.js should do this as well, to prevent conflicts proactively.
legend matching
Digging deeper into your example, the actual source of conflict is that the legend matches with associated charts based on the color and the dashstyle. (Yes, it is weird that the legend matches items based on their attributes rather than by ID.)
I was able to get a basic example working by changing the legend items, but I think it was only because totalLength is incorrect (0).
let leg = chart.legendables;
chart.legendables = function() {
return leg.apply(chart).map(l => ({...l, dashstyle: [0,0]}));
}
It also changed the legend from squares to lines:
Fiddle.
Anyway, that's the reason it wasn't working - nothing to do with events, just the weird way the legend works. Chances are this solution won't work if totalLength and the dashstyle are correct. I didn't see the affect of your transitions, so it's likely something is wrong.
overriding the line chart
It's pretty easy to override the logic in the line chart so that it only looks at colors, not dash styles.
One way to do this is by deriving an ES6 class from it:
class LineChartNoDashMapping extends dc.LineChart {
_colorFilter (color, dashstyle, inv) {
return function () {
const item = d3.select(this);
const match = item.attr('stroke') === color || item.attr('fill') === color;
return inv ? !match : match;
};
}
}
_colorFilter is copied straight from dc.LineChart (source) and we just remove the clause having to do with dash styles. (We also have to qualify d3.select.)
Plug our new class into the series chart:
.chart(function(c) { return new LineChartNoDashMapping(c).curve(d3.curveCardinal); })
Now the legendables override isn't needed, and the legend works as expected. Much nicer!
New fiddle.