避免使用交叉滤波器的直流供电 d3 气泡图的负轴值

Question

我们使用下面的dc 驱动d3 气泡图和crossfilter

var payerBubbleChart;

payerBubbleChart = dc.bubbleChart('#payer-chart');

var dateFormat = d3.time.format('%m/%d/%Y');
var numberFormat = d3.format('.2f');

var PracticeId = GetPracticeId(),
  CityId = GetCityId(),
  FromDate = GetFromDate(),
  ToDate = GetToDate(),
  ProviderId = GetProviderId();

var filteredData = source1.filter(function(d) {

  if (CityId != "0" && ProviderId != "0" && PracticeId != "-- ALL -- ") {
    return (
      d.claimDate >= FromDate &&
      d.claimDate <= ToDate &&
      d.city == CityId &&
      d.provider == ProviderId
      /*&&
                      d.practice == PracticeId*/
    );
  } else {
    return (
      d.claimDate >= FromDate &&
      d.claimDate <= ToDate
    );
  }
});

var source1CF = crossfilter(filteredData);
var payerDim = source1CF.dimension(function(d) {
  return d.drug;
});

var payerGroup = payerDim.group().reduce(
  function(p, v) {
    ++p.count;
    p.denialCount += v.denialCount;
    p.claimCount += v.claimCount;
    p.revenue += v.revenue;
    return p;
  },
  function(p, v) {
    --p.count;
    p.denialCount -= v.denialCount;
    p.claimCount -= v.claimCount;
    p.revenue -= v.revenue;
    return p;
  },
  function() {
    return {
      count: 0,
      revenue: 0,
      denialCount: 0,
      claimCount: 0
    }
  }
);

payerBubbleChart
  .width(450).height(chartHeight).transitionDuration(1500).margins({
    top: 20,
    right: 50,
    bottom: 30,
    left: 40
  })
  .dimension(payerDim)
  .group(payerGroup)
  .colors(colorbrewer.RdYlBu[9])
  .colorDomain([0, 100])
  .colorAccessor(function(d) {
    return (d.value.denialCount / d.value.claimCount);
  })
  .keyAccessor(function(p) {
    return p.value.denialCount;
  })
  .valueAccessor(function(p) {
    return p.value.revenue;
  })
  .radiusValueAccessor(function(d) {
    return (d.value.claimCount / 1000);
  })
  .maxBubbleRelativeSize(0.3).x(d3.scale.linear()).y(d3.scale.linear())
  .r(d3.scale.linear().domain([0, 500]))
  .elasticY(true).elasticX(true)
  .yAxisPadding(1000000).xAxisPadding(1000000)
  .renderHorizontalGridLines(true).renderVerticalGridLines(true)
  .xAxisLabel('Denial Amount').yAxisLabel('Revenue')
  .renderLabel(true).label(function(p) {
    return p.key;
  })
  .renderTitle(true)
  .title(function(p) {

    return [p.key,
        'Revenue: $' + formatNumber(p.value.revenue, 1000, "k"),
        'Claims: ' + formatNumber(p.value.claimCount, 1000, "k"),
        'Denials: $' + formatNumber(p.value.denialCount, 1000, "k")
      ]
      .join('\n');
  })
  .yAxis().tickFormat(function(v) {
    return "$" + formatNumber(v, 1000, "k");
  });
payerBubbleChart.xAxis().tickFormat(function(v) {
  return "$" + formatNumber(v, 1000, "k");
});

<div id="payer-chart">
</div>

由于某些未知原因，坐标区显示负值

• json 中没有负值
• 尝试从 reduce 中删除 some negation code --p.count; p.denialCount -= v.denialCount; p.claimCount -= v.claimCount; p.revenue -= v.revenue;

我们在这方面很新，有人可以指导我们吗？

Answer 1

来自Github

chart.xAxisMin = function() { return 0; };
chart.yAxisMin = function() { return 0; };