dc.js를가 : 전설 나는 원형 차트의 전설에 대한 이미지 (아이콘이나 SVG) 대신 기본 사각형을 사용하고 싶습니다

Question

에 대한 이미지를 사용합니다. dc.js에서이 작업을 수행 할 수 있습니까? 예를 들어

:

많은 감사합니다.

Answer 1

이 기능은 내장되어 있지 않지만 일반적으로 쉽게 "d3으로 탈출하여"차트를 사용자 정의 할 수 있습니다. 이 경우

, 우리는 차트가 렌더링 될 때까지 기다린 다음 이미지로 사각형을 교체하려면 :

범례 항목을 선택 차트

chart.on('pretransition', function(chart) { // 1 
    var items = chart.selectAll('.dc-legend .dc-legend-item'); // 2 
    items.selectAll('rect').remove(); // 3 
    var images = items.selectAll('image').data(function(x) { // 4 
     return [x]; 
    }); 
    images.enter().append('image').attr({ // 5 
     width: 25, 
     height: 25, 
     href: function(leg) { return _icons[leg.name]; } 
    }); 
    console.log('items', items.data()); 
}); 

1. 대기 렌더링/다시 그리기
2. 각 항목 아래에있는 rect을 제거하십시오 (꺾은 선형 차트 인 경우 line 대신
3. 을 선택하십시오.) 어떤 기존 이미지 (" 단일 항목 배열은 이미지를 추가하지 않고 계속 깔끔하게 교체 할 수 있도록
4. image을 설정합니다.이 예에서는 CDN에서 찾을 수있는 첫 번째 SVG 아이콘을 사용하고 있습니다. ; 객체를 사용하여 스택 이름을 SVG URL에 매핑합니다.

마지막으로, 우리는 또한 이미지 높이에 맞게 전설의 항목 높이를 설정해야합니다

chart.legend(dc.legend().itemHeight(25)); 

예를 출력 :

예 바이올린 : https://jsfiddle.net/gordonwoodhull/Lss5wsz6/9/