dc sunburst chart -- color of legend and the chart does NOT match

[lipingyang-geoai]

In the dc sunburst chart (see this example https://dc-js.github.io/dc.js/examples/sunburst.html), the color of the legend seems does not match the color of the sunburst chart. Any hints and suggestions to make the color scheme match? otherwise it is misleading and confusing. thanks.

[gordonwoodhull]

Thanks for filing this, @lipingyang-geoai!

It looks like it may be confused between alphabetical and numeric order... notice that the colors are contiguous e.g. from 1,10 to 1,19 on the chart (slice 2-11 clockwise from the top), but have gaps where alphabetic and numeric order disagree.

EDIT: numeric order would make the colors contiguous, and make more sense for this example, but it is the multikeys that cause the legend to differ from the chart.

[lipingyang-geoai]

Thanks, Gordon @gordonwoodhull, still not able to figure this out. I checked all three sunburst examples on the dc.js examples page, seem all sunburst chart has the same issue, the color scheme of the legend does not match that of the chart. Is that the way it should be?? Thanks.

[gordonwoodhull]

Whoops, meant to look at the last week. Will try to look tomorrow!

Should not be complicated, probably a scale configured wrong or something.

[lipingyang-geoai]

sounds great. look forward to your suggestions!

[gordonwoodhull]

I haven't dug into the exact cause here, but it looks like you can get consistent colors by making sure the colorAccessor for the sunburst chart uses the last part of the key:

        .colorAccessor(d => {
            var key = d.key;
            if(Array.isArray(key))
                key = key[key.length-1];
            return key;
        })

I am not sure why it is sometimes getting called with a scalar number and sometimes with the multikey array. This probably has something to do with the problem!

I quickly tried pasting the above code into the other three sunburst examples, and it seems to fix them. Presumably it could be changed in the sunburst constructor, which currently uses the key accessor for the color accessor:

dc.js/src/charts/sunburst-chart.js

Line 66 in 0412000

this.colorAccessor(d => this.keyAccessor()(d));

However, there may be a cleaner fix, so let's leave this open in case someone wants to investigate why this is happening.

[lipingyang-geoai]

@gordonwoodhull Thank you so much, Gordon, You ROCK! it works! Ok, I will leave this issue open. But Thank you so much again! Very best!