如何使用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函数以从绝对域值计算te范围值：

  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>

​