dc 차트에서 거품이 숨거나 자르는 것을 피하십시오

Question

거품이 숨겨지고있는 dc.js을 사용하여 작성된 거품 형 차트가 있습니다. 이 행동을 피하기위한 속성이 있습니까? 내가 .x 또는 .r에 대한 d3.scale.log을 적용

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

: 여기

코드인가? 차트가 사라집니다.

Answer 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 & A의 확장 종류는 How to avoid truncated bubbles when elasticX or elasticY입니다.