javascript - 如何使用plottable.js 检查标签格式化程序中的原始值？

Question

我有一个使用 Plottable 的相对简单的条形图。所有条形都从 0 开始，但第三个条形可以为负数并改变颜色。为了以这种方式显示，对于第三个栏，我使用 Math.abs(value) 。问题是当它是负数时，我需要让标签实际显示它也是负数。我如何设置标签以在此处正确显示负数，但保持图形的相同格式？

注意:该脚本可以运行几次以查看利润栏的正值和负值版本。

function HBarChart(key, state) {
  var colors = {
    Sales: '#00c786',
    Expenses: '#f5a623',
    Profit: '#009464',
    Profit_neg: '#ea655d'
  };

  this._eleSelector = 'svg#' + key;
  this.xScale = new Plottable.Scales.Linear().domainMin(0);
  this.yScale = new Plottable.Scales.Category();
  this.xAxis = new Plottable.Axes.Numeric(this.xScale, 'bottom');
  this.yAxis = new Plottable.Axes.Category(this.yScale, 'left')
    .innerTickLength(0)
    .endTickLength(0);
  
  this.plot = new Plottable.Plots.Bar('horizontal')
    .x(function(d) {
      return Math.abs(d.x);
    }, this.xScale)
    .y(function(d) {
      return d.category;
    }, this.yScale)
    .attr("fill", function(d) {
      return colors[d.category + (d.x < 0 ? '_neg' : '')];
    })
    .labelFormatter(function(d) {
      return Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(d);
    })
    .labelsEnabled(true);
  
  this.setData(state);
  this.chart = new Plottable.Components.Table([
    [this.yAxis, this.plot]
  ]);
  
  this.chart.renderTo(this._eleSelector);
}

HBarChart.prototype.setData = function(state) {
  var dummySet = {
    revenue: Math.random() * 10000 + 1000,
    expense: Math.random() * 10000 + 1000
  };
  
  dummySet.profit = dummySet.revenue - dummySet.expense;
  
  var dataSet = [{
    category: 'Sales',
    x: dummySet.revenue
  }, {
    category: 'Expenses',
    x: dummySet.expense
  }, {
    category: 'Profit',
    x: dummySet.profit
  }];
  if (this.dataset) {
    this.plot.removeDataset(this.dataset);
  }
  
  this.dataset = new Plottable.Dataset(dataSet);
  this.plot.addDataset(this.dataset);

}

new HBarChart('test');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.min.js"></script>

<svg id="test"></svg>

Answer 1

您可以重写xScale.scale函数来根据绝对域值计算范围值:

  var origXScale = this.xScale.scale.bind(this.xScale);
  this.xScale.scale = function(d) { 
    return origXScale(Math.abs(d)); 
  };

并让 x 访问器返回原始值:

 this.plot = new Plottable.Plots.Bar('horizontal')
  .x(function(d) {
    return d.x;
  }, this.xScale)

这样您的格式化程序也将获得原始值。

完整示例:

function HBarChart(key, state) {
  var colors = {
    Sales: '#00c786',
    Expenses: '#f5a623',
    Profit: '#009464',
    Profit_neg: '#ea655d'
  };

  this._eleSelector = 'svg#' + key;
  this.xScale = new Plottable.Scales.Linear().domainMin(0);
  var origXScale = this.xScale.scale.bind(this.xScale);
  this.xScale.scale = function(d) { 
       return origXScale(Math.abs(d)); 
  };
  this.yScale = new Plottable.Scales.Category();
  this.xAxis = new Plottable.Axes.Numeric(this.xScale, 'bottom');
  this.yAxis = new Plottable.Axes.Category(this.yScale, 'left')
    .innerTickLength(0)
    .endTickLength(0);
  
  this.plot = new Plottable.Plots.Bar('horizontal')
    .x(function(d) {
      return d.x;
    }, this.xScale)
    .y(function(d) {
      return d.category;
    }, this.yScale)
    .attr("fill", function(d) {
      return colors[d.category + (d.x < 0 ? '_neg' : '')];
    })
    .labelFormatter(function(d) {
      return Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(d);
    })
    .labelsEnabled(true);
  
  this.setData(state);
  this.chart = new Plottable.Components.Table([
    [this.yAxis, this.plot]
  ]);
  
  this.chart.renderTo(this._eleSelector);
}

HBarChart.prototype.setData = function(state) {
  var dummySet = {
    revenue: Math.random() * 10000 + 1000,
    expense: Math.random() * 10000 + 1000
  };
  
  dummySet.profit = dummySet.revenue - dummySet.expense;
  
  var dataSet = [{
    category: 'Sales',
    x: dummySet.revenue
  }, {
    category: 'Expenses',
    x: dummySet.expense
  }, {
    category: 'Profit',
    x: dummySet.profit
  }];
  if (this.dataset) {
    this.plot.removeDataset(this.dataset);
  }
  
  this.dataset = new Plottable.Dataset(dataSet);
  this.plot.addDataset(this.dataset);

}

new HBarChart('test');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.0.0/plottable.min.js"></script>

<svg id="test"></svg>