CODEWITHSUNDEEP
d3.js
JamesE
JamesE

Reputation: 3923

D3 data sort order

I have a multiline graph that has the data sorted by date first and then PFC ID (the data being graphed). The line chart itself works fine, but I am also dynamically creating the legend and the legend is being sorted by date first and then the PFC ID. I'd rather just have the legend itself sorted by PFC ID without the date. Is there a way I can do this without messing up the chart? If I remove the primary sort on the date from the query the chart itself no longer works correctly.

The code for the legend is below:

    legend.append("rect")
    .attr("height",10)
    .attr("width", 25)
    .attr("class", function(d) { return d.key; })
    .attr("x", width + 30)
    .attr("y", function(d,i) { return height - 495 + (i*25); })
    .attr("stroke", function(d) { return color(d.key);})
    .attr("fill", function(d) { return color(d.key); });

An example can be found here: https://jsfiddle.net/goodspeedj/5ewLxpre/

Upvotes: 0

Views: 2753

Answers (1)

Mark
Mark

Reputation: 108537

Just sort the data after your nest call:

        // nest data
        var nested_data = d3.nest()
            .key(function(d) { return dimKey(d); })
            .entries(data);

        // sort on key
        nested_data.sort(function(a,b){
          return a.key.localeCompare(b.key);
        });

Updated fiddle.

FOR COMMENTS

Assuming wellID is uniquely paired to wellName, then it's:

        nested_data.sort(function(a,b){
            return a.values[0].wellID - b.values[0].wellID;
        });

Update fiddle two.

Upvotes: 1

Related Questions