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

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;
};

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

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

此外，这个Q＆amp; A有点像How to avoid truncated bubbles when elasticX or elasticY的扩展。