добавить легенду на график рассеяния dc.js - PullRequest
Новая
       20

добавить легенду на график рассеяния dc.js

0 голосов
/ 06 декабря 2018

Отчасти связанный с этим вопросом .

Я хотел бы добавить легенду к диаграмме рассеяния, используя dc.js, в идеале с возможностью выделения точек на основе наведения / щелчка мышью.соответствующая легендаИсходный код , кажется, указывает, что color является "легендарным" для диаграмм рассеяния, но я не могу найти никаких примеров, где это делается.

Запуск приведенного ниже кода в браузере вызывает ошибку:

tmp.html:26 Uncaught TypeError: Cannot read property 'key' of undefined at Object.myChart.dimension.group.colorAccessor.d (tmp.html:26) at Object._chart.getColor (color-mixin.js:149) at Object._chart.legendables (scatter-plot.js:360) at Object._legend.render (legend.js:45) at Object._chart.render (base-mixin.js:703) at Object.dc.renderAll (core.js:230) at tmp.html:33 

<!DOCTYPE html><html><head><title></title>
    <link rel="stylesheet" type="text/css" href="dc.css"/>
    <script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.6/crossfilter.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.js"></script>
</head><body>
<div id="chart"></div>
<script type="text/javascript">

dc.config.defaultColors(d3.schemeCategory10);
var myChart = dc.scatterPlot("#chart");

let input = [{x:0,y:0,c:1}, {x:1,y:1,c:0},{x:0.5,y:0.5,c:2}];
(function(data) {

    var ndx = crossfilter(input),
        dims = ndx.dimension( d => [+d.x,+d.y,+d.c]),
        grp = dims.group();

    myChart
        .dimension(dims)
        .group(grp)
        .colorAccessor(d=> +d.key[2])
        .x(d3.scaleLinear().domain(d3.extent(d3.extent(input, d => +d.x))))
        .valueAccessor(d => +d.key[1])
        .brushOn(false)
        .legend(dc.legend().x(750).y(10).itemHeight(13).gap(5));
})(input);

dc.renderAll();
</script></div></body></html>

1 Ответ

0 голосов
/ 06 декабря 2018

Да, к сожалению, это ошибка, о которой сообщалось давно, но она так и не была исправлена.Диаграмма рассеяния вызывает _chart.getColor() без аргументов.

https://github.com/dc-js/dc.js/issues/1138#issuecomment-217861014

Даже если она исправлена, она возвращает только одну легендарную, поэтому я думаю, что она будет работать только для серии разбросадело.Если вы хотите отобразить элементы легенды для каждого цвета на диаграмме, вам нужно будет сгенерировать эти данные самостоятельно: 

myChart.legendables = function () {
    var byColor = {};
    myChart.group().all().forEach(function(d) {
        var color = myChart.colors()(myChart.colorAccessor()(d));
        byColor[color] = {
            chart: myChart,
            name: 'color ' + myChart.colorAccessor()(d),
            color: color
        };
    })
    return Object.values(byColor);
};

Возможно, диаграмма должна что-то сделать автоматически.Одна из сложностей заключается в том, что в настоящее время нет никаких имен, определенных для цветов - здесь я просто вставил 'color ' со значением, возвращаемым средством доступа к цвету, но, вероятно, у вас есть лучшие имена в вашем фактическом наборе данных.

Вилка вашей скрипки .

...