The purpose of my code is to use the range chart(bar chart) that shows the count of the datasets produced in years, to brush on the focus chart(line chart). The focus chart then displays the count on the monthly basis. My code is here . It seems to be working fine when I select a big range through the brush. However, when I select small range like: 1 or 2 bars, it shows me the following error
Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)". d3.v3.min.js:4Moreover, it does not filter the focus chart as well then. I will appreciate any help
The y value is being calculated as the difference between the y value of the focus chart's y scale and the y value of the range chart's y scale. This difference could be a negative value, which would result in the NaN value when passed to the translate function.
One way to fix this issue would be to add a conditional statement to check if the difference is negative, and if it is, use the absolute value of the difference instead.
Here's how that would look:
function brushmove() { var extent = brush.extent(); // ...var y = y1(extent[0]) - y2(extent[0]); // check if y is negative and use the absolute value if it is if (y < 0) { y = Math.abs(y); } context.select(".brush").call(brush.extent(extent)).call(brush.event); context.select(".bar.secondary").attr("transform", "translate(0," + y + ")"); }