CODEWITHSUNDEEP
d3.js
johnnymcnugget
johnnymcnugget

Reputation: 46

Drawing Non-Continuous Horizon Charts (d3)

(apologies for my lack of knowledge upfront)

Horizon Charts seem to be handled differently than area charts in D3. I've seen previous answers on non-continuous data in area charts, using line.defined. However, I'm not seeing how to accomplish that same effect in a horizon chart.

End goal: Where data is missing, skip or otherwise mask later, that point. As in this line.defined example (http://bl.ocks.org/mbostock/3035090), it shouldn't affect the curve of the path.

Ideally, the data in the json would just be a missing value, but I can add a type signifier if needed.

Is there a better approach - like adding a filled rectangle after the path was created in those spots to mask it?

Upvotes: 1

Views: 997

Answers (1)

Jason Davies
Jason Davies

Reputation: 4693

I've updated the d3.horizon plugin to support setting area.defined for the area instance used internally.

For example, you can say:

var horizon = d3.horizon()
    .width(…)
    .height(…)
    .defined(function(d) { return !isNaN(d[1]); });

Upvotes: 2

Related Questions