CODEWITHSUNDEEP
javascriptd3.jsdc.js
GrahamB
GrahamB

Reputation: 569

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

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

Sample screenshot

Is it possible in dc/d3 to not do this, i.e I would expect the graph to more resemble the following;

Desired

Upvotes: 1

Views: 1298

Answers (2)

andorov
andorov

Reputation: 4336

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.

Upvotes: 3

Gordon
Gordon

Reputation: 20140

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

Upvotes: 1

Related Questions