d3.js line and area graph - want to add a extra line defined by two points and representing a threshold/minimum value (for ease of viewing)

d3.js, javascript

Solution

Instead of trying to draw both the reference line and the data line together, consider drawing them separately:

svg.append("svg:path")
    .attr("class", "minline")
    .attr("clip-path", "url(#clip)");   
...
svg.select("path.minline").data([min_data_return]);
...
svg.select("path.minline").attr("d", line);

JSfiddle here with full example: http://jsfiddle.net/qAHC2/6/

Problem

I have a working d3.js visualization that shows data return rates as a composite line and area graph (http://anf.ucsd.edu/tools/data_return_rates/). The x-axis is time, the y-axis is percent data return rates. You can click various buttons at the top of the visualization to switch between datasets (just parsed JSON files). In addition to the raw data plot, I want to add a simple line that defines the minimum data return rate required (85%). This is purely a visual aid to help users determine if the data return rates are above this minimum/threshold value. I calculate the x-values (time) for this 'minima'-line (only two points) using the d3.min() and d3.max() methods on the dataset. The y-values are just integers (85): ``` var min_data_return = [ { "readable_time": d3.min(data, function(d) { return d.readable_time; }), "value": 85 }, { "readable_time": d3.max(data, function(d) { return d.readable_time; }), "value": 85 } ] ``` (I do some other transformations to make sure everything plots okay) Now, before I wanted this minima line added to the visualization, I just did the following to create the area and line plot, which worked: ``` svg.select("path.area").data([data]); svg.select("path.line").data([data]); ``` There is some other plotting code later in the script: ``` svg.select("path.area").attr("d", area); svg.select("path.line").attr("d", line); ``` All the d3.js examples I have read say that to create multiple lines, you just need to make your data array have all the datasets you want to plot, so in my example above, this: ``` svg.select("path.line").data([data]); ``` Becomes: ``` svg.select("path.line").data([data, min_data_return]); ``` And this should work. However, it doesn't. I see the data set line plotted as before, but not the min_data_return line. Any ideas what I am doing wrong? Gist here: https://gist.github.com/2662793 In the Gist, look at lines 133 - 140 (search for the commented string OPTION). These are the only lines that are relevant to getting this working. I put the whole script into the Gist for completeness. Thanks in advance!

Original source