使用相同的数据集创建Plottable.js叠加条形图

Question

我正在尝试使用来自同一数据集的plottable.js创建堆叠条形图。有可能吗？

这是我的样本数据集

var data = [{ x: 0, y: 1, m: 10 },
            { x: 1, y: 1, m: 9 },
            { x: 2, y: 3, m: 5 },
            { x: 3, y: 2, m: 5 },
            { x: 4, y: 4, m: 8 },
            { x: 5, y: 3, m: 7 },
            { x: 6, y: 5, m: 5 }];

在http://plottablejs.org/components/plots/stacked-bar/上发布的示例中，它使用了两个数据集。

var plot = new Plottable.Plots.StackedBar()
           .addDataset(new Plottable.Dataset(primaryData).metadata(5))
           .addDataset(new Plottable.Dataset(secondaryData).metadata(3))
           .x(function(d) { return d.x; }, xScale)
           .y(function(d) { return d.y; }, yScale)
           .attr("fill", function(d, i, dataset) { return dataset.metadata(); }, colorScale)
           .renderTo("svg#example");

我的问题是，由于我使用的是相同的数据集，我需要将'y‘函数转换为两个不同的函数，如下所示：

.y(function(d) { return d.y; }, yScale)
.y(function(d) { return d.m; }, yScale)

有可能吗？如果是，怎么做？

谢谢..。

Answer 1

您可以基于相同的数据创建两个不同的Plottable.Dataset。

所以就从这样开始：

var ds1 = new Plottable.Dataset(data);
var ds2 = new Plottable.Dataset(data);

但是，稍后您需要区分这两个数据集以知道要使用哪个属性，因此应该添加元数据

var ds1 = new Plottable.Dataset(data, {name: "ds1"});
var ds2 = new Plottable.Dataset(data, {name: "ds2"});

现在，您可以引用数据集的名称，以知道在.y()调用中返回哪个值

plot.y(function(d, i, ds){
  if(ds.metadata().name == "ds1"){
    return d.y;
  }
  else{
    return d.m;
  }
}, yScale);