dcチャートで泡が隠れるのを避ける

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

これに対処するには、少なくとも2つの方法があります。 1つはxAxisPaddingとyAxisPaddingを使用してチャートをバブルの外に持っていくことです。

これらはドメイン単位であるため、100の値は非常に小さく、何千もあります。また、意図的に0で停止しています。yAxisMin、yAxisMaxトリックです。

気泡がチャート外に部分的に描かれているように、関連する問題に@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 &は、How to avoid truncated bubbles when elasticX or elasticYの拡張のようなものです。