Get correct percent in dimplejs vertical 100% bar chart - dimple.js

Question

I have created a vertical 100% bar chart similar to this example but with the Titanic dataset. The default tooltip shows the correct percentages but my modified tooltip does not. In the figure below, the tooltip should show 73%, which is the percentage of women that survived, instead of 100%.
It seems that my code is giving me the correct percent as it is aggregating with respect to the variable Sex instead of along the dimension of Survived/Did not survive. Code snippets below. Variable 'source' is defined by clicking on the menu.
d3.tsv("data/titanic.tsv", function(data) {
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", source);
x.addOrderRule(source);
var y = myChart.addPctAxis("y", "count");
var mySeries = myChart.addSeries(["Survived"], dimple.plot.bar);
And for the tooltip:
mySeries.addEventHandler("mouseover", function (e) {
var cx = parseFloat(e.selectedShape.attr("x"));
var cxWidth = parseFloat(e.selectedShape.attr("width"));
var cy = parseFloat(e.selectedShape.attr("y"));
// set size and coordinates of tooltip
var width = 120;
var height = 50;
var xPop = (cx +width + 10 < svg.attr("width")) ? cx: cx ;
var yPop = (cy - height / 2 < 0) ? 25: cy - height / 2 + 35;
popup = svg.append("g");
// change style of tooltip
popup
.append("rect")
.attr("x", xPop + 5)
.attr("y", yPop - 5)
.attr("width", 150)
.attr("height", height)
.attr("width", width)
.attr("rx", 5)
.attr("ry", 5)
.style("fill", "white")
.style("stroke", "#36b0b6")
.style("stroke-width", 2);
//add appropriate text to tooltip
popup
.append('text')
.attr('x', xPop + 10)
.attr('y', yPop + 10)
.append('tspan')
.attr('x', xPop + 10)
.attr('y', yPop + 20)
.text(e.seriesValue[0])
.style("font-family", "sans-serif")
.style("font-size", 10)
.append('tspan')
.attr('x', xPop + 10)
.attr('y', yPop + 40)
.text("Percent: " + d3.format(",.0f")(e.yValue *100))
.style("font-family", "sans-serif")
.style("font-size", 10);
});
With acknowledgements to Anna Pawlicka for original tooltip code. I have played around with yValue, seriesValue, and aggField. I can get the correct percent to show up by hard coding via something like
if (e.xValue==="Female" && e.seriesValue[0]==="Survived") {
var t = 337/464 }
but that is not the most elegant solution.
Any ideas on what I am missing?

Answer 1

The way you've done it makes sense, but there's an oversight in the eventArgs which causes it to send the running total rather than the total for the segment. You can work around it by applying the event handler with the d3 method. It's important that you move the code after the draw function is called, at which point you can get access to the d3 shapes and apply an event handler with on:
// Must draw first
myChart.draw();
// Can now access series.shapes for d3 stuff
mySeries.shapes.on("mouseover", function (d) {
// d contains the full data element as used by dimple's internal methods
var cx = parseFloat(e.selectedShape.attr("x"));
var cxWidth = parseFloat(e.selectedShape.attr("width"));
var cy = parseFloat(e.selectedShape.attr("y"));
// set size and coordinates of tooltip
var width = 120;
var height = 50;
var xPop = (cx +width + 10 < svg.attr("width")) ? cx: cx ;
var yPop = (cy - height / 2 < 0) ? 25: cy - height / 2 + 35;
popup = svg.append("g");
// change style of tooltip
popup
.append("rect")
.attr("x", xPop + 5)
.attr("y", yPop - 5)
.attr("width", 150)
.attr("height", height)
.attr("width", width)
.attr("rx", 5)
.attr("ry", 5)
.style("fill", "white")
.style("stroke", "#36b0b6")
.style("stroke-width", 2);
//add appropriate text to tooltip
popup
.append('text')
.attr('x', xPop + 10)
.attr('y', yPop + 10)
.append('tspan')
.attr('x', xPop + 10)
.attr('y', yPop + 20)
.text(e.seriesValue[0])
.style("font-family", "sans-serif")
.style("font-size", 10)
.append('tspan')
.attr('x', xPop + 10)
.attr('y', yPop + 40)
// Now you just need to use height instead of yValue
.text("Percent: " + d3.format("%")(e.height))
.style("font-family", "sans-serif")
.style("font-size", 10);
});
The code is the same as yours apart from using on instead of addEventHandler and using height instead of yValue.