Question

我正在尝试使用dc.js生成离散条形图。如果数据是整数格式，那么它会像魅力一样生成图表。但是当我将输入数据更改为String时，它将无法工作。我在下面的代码中遗漏了什么？这是我的小提琴链接：jsfiddle link

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);

Answer 1

如果您的x数据是字符串，那么您需要使用d3.scale.ordinal()代替d3.scale.linear().domain(...)

有关详细信息，请参阅d3 scale文档：

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

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

您可能还需要.xUnits(dc.units.ordinal) - dc.js中的极少数是完全自动的。

dc.js不接受字符串数据来生成图表

1 个答案: