dc.js не принимает строковые данные для создания диаграммы

Я пытаюсь сгенерировать дискретную гистограмму, используя dc.js. Если данные представлены в формате Interger, тогда они генерируют диаграмму как заговор. Но как только я изменю входные данные на String, это не сработает. Я что-то упустил в коде ниже? вот моя ссылка на скрипку: ссылка на jsfiddle

var chart = dc.barChart("#test");
var data = [ 
    { "x": "Urgent","y": 5 },
    { "x": "High", "y": 10 },
    { "x": "Medium", "y": 0 },
    { "x": "Low", "y": 50 },
    { "x": "None", "y": 0 }
];
var ndx = crossfilter(data),
      priorityValue = ndx.dimension(function(d) {return d.x;}),
      countValue = priorityValue.group().reduceSum(function(d) {return d.y;});
  console.log("xaxis",priorityValue);
  chart
    .width(768)
    .height(480)
    .gap(20)
    .x(d3.scale.linear().domain([0, data.length + 1]))
    .xAxisLabel("Priority")
    .brushOn(false)
    .centerBar(true)
    .renderLabel(true)
    .yAxisLabel("Number of Alerts")
    .elasticX(true)
    .dimension(priorityValue)
    .group(countValue)
    .renderTitle(true).title(function (d) {
      return 'test: ' + d.value;
        })
    .renderHorizontalGridLines(true)
    .label(function (d) {
            console.log(d);
            return 'test';
        });


  chart.render();

labels = chart.g().selectAll("rect.bar text");
console.log(labels);

1 ответ

Если ваши данные x являются строками, то вам нужно использовать d3.scale.ordinal() вместо d3.scale.linear().domain(...)

См. Документацию по весам d3 для получения дополнительной информации:

https://github.com/mbostock/d3/wiki/Ordinal-Scales

https://github.com/mbostock/d3/wiki/Quantitative-Scales

Вам также может понадобиться .xUnits(dc.units.ordinal) - очень мало в dc.js полностью автоматически.

Другие вопросы по тегам