Google 차트 Sankey - 노드 텍스트 스타일

Question

Google의 Sankey 다이어그램에서 스타일 역할이있는 대상 노드 텍스트의 색상을 변경하는 방법이 있습니까? 현재 다음과 같은 데이터 설정이 있습니다.

[Source, Target, Label, Style] 
[A,B,"Test Label", "#ffffff"] 

노드와 링크의 색상은 변경할 수 있지만 텍스트는 변경할 수 없습니다.

d3은이 시점에서 나에게 옵션이 아니며, 전체 아이디어는 노드가 다른 위치에 나타나도록 애니메이션을 적용하여 스타일을 변경하고 다이어그램을 다시 그립니다. 노드가 위치를 변경하기 때문에 테이블을 확장하는 것이 작동하지 않습니다. 어떤 아이디어?

Answer 1

표준 옵션

하지만 차트는 일반적으로

을 그린 후 색, 수동으로 설정할 수 있습니다를 사용하여 개별 노드 텍스트 스타일을 할 수있는 방법을 찾을 수 없습니다, 차트의 'ready' 이벤트를 사용할 수 있습니다 차트를 그리기 완료되면,
그러나 차트는 모든 대화 형 이벤트의 기본 노드 텍스트 스타일로 다시 돌아갑니다, 알고
같은 'onmouseover', 'onmouseout' 대신 'select'

&이

각 노드 텍스트에 색상 매핑 작업 조각을, 다음을 참조 어떤 상호 작용에 노드 텍스트을 변경하는 돌연변이 관찰자를 사용하여 ...

google.charts.load('current', {'packages':['sankey']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'From'); 
 
    data.addColumn('string', 'To'); 
 
    data.addColumn('number', 'Weight'); 
 
    data.addRows([ 
 
    ['A', 'X', 5], 
 
    ['A', 'Y', 7], 
 
    ['A', 'Z', 6], 
 
    ['B', 'X', 2], 
 
    ['B', 'Y', 9], 
 
    ['B', 'Z', 4] 
 
    ]); 
 

 
    var options = { 
 
    width: 600 
 
    }; 
 

 
    var colorMap = { 
 
    'A': 'cyan', 
 
    'X': 'magenta', 
 
    'Y': 'yellow', 
 
    'Z': 'lime', 
 
    'B': 'violet' 
 
    }; 
 

 
    var chartDiv = document.getElementById('sankey_basic'); 
 
    var chart = new google.visualization.Sankey(chartDiv); 
 

 
    var observer = new MutationObserver(function (mutations) { 
 
    mutations.forEach(function (mutation) { 
 
     mutation.addedNodes.forEach(function (node) { 
 
     if (node.tagName === 'text') { 
 
      node.setAttribute('font-size', '20'); 
 
      node.setAttribute('fill', colorMap[node.innerHTML]); 
 
     } 
 
     }); 
 
    }); 
 
    }); 
 
    observer.observe(chartDiv, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sankey_basic"></div>