dc/d3 line chart crashing down to 0 on the y axis after filtering

Question

When I apply a dimension filter to a dc.js graph, there are ugly lines where the line plummets towards the y axis.

Answer 1

Two possible solutions, depending whether you want the line connected or in sections:

1. Pre-filter the data so that instead of having groups that sum to zero, there aren't groups there at all. This will connect the points with a line segment over the missing data. https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted

2. Use lineChart.defined to put gaps/breaks in the line where there is no data. https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#definedvalue

Answer 2

You can call defined directly on the dc created chart.

chart
  .chart((c) ->
    dc.lineChart(c)
      .interpolate('linear')
      .defined((d) ->
        return !isNaN(d.y)
      )
  )

The condition !isNan(d.y) can be anything you like that evaluates to true/false.

Note that the d passed by defined is a d3 object and is worth inspecting.