避免 dc 图表中来自 hiding/cutting 的气泡

Question

我使用 dc.js 构建了一个气泡图，其中隐藏了气泡。是否有属性来避免这种行为？

代码如下：

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

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 / 100);
  })
  .maxBubbleRelativeSize(0.3).x(d3.scale.linear()).y(d3.scale.linear())
  .r(d3.scale.linear().domain([0, 100]))
  .elasticY(true).elasticX(true)
  .yAxisPadding(100).xAxisPadding(100)
  .renderHorizontalGridLines(true).renderVerticalGridLines(true)
  .xAxisLabel('Denial Amount').yAxisLabel('Revenue')
  .renderLabel(true).label(function(p) {
    return p.key;
  })
  .renderTitle(true)
  .title(function(p) {

    return ['NDC: ' + 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");
  });
payerBubbleChart.xAxisMin = function() {
  return 0;
};
payerBubbleChart.yAxisMin = function() {
  return 0;
};

我为 .x 或 .r 申请了 d3.scale.log？图表消失了。

Answer 1

至少有两种方法可以解决这个问题。一种是使用 xAxisPadding 和 yAxisPadding 将图表移出气泡。

这些是域单位，因此 100 对于您的值（以千为单位）来说非常小。另外，你故意用 yAxisMin、yAxisMax 把戏停在 0。

另一种处理方法是简单地删除剪裁，这样气泡就会部分绘制在图表之外，如@tttp 在相关问题中所示：

  dc.bubbleChart('#bubbly') 
  .on('renderlet', function(chart, filter){
    chart.svg().select(".chart-body").attr("clip-path",null);
  })

https://github.com/dc-js/dc.js/issues/998#issuecomment-216558123

此外，此问答是的扩展。

避免 dc 图表中来自 hiding/cutting 的气泡

Avoid bubbles from hiding/cutting in dc charts

javascript

data-visualization

dc.js