javascript - 避免在直流图表中隐藏/切割气泡

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

此外，这个问答是 How to avoid truncated bubbles when elasticX or elasticY 的扩展。 .