1

有沒有方法在Google的Sankey圖表中改變具有樣式角色的目標節點文本的顏色?目前我有這樣的數據設置:Google Charts Sankey - 節點文字樣式

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

我能夠改變節點和鏈接的顏色,但不是文本。

在這一點上,d3對我來說不是一種選擇,整個想法是讓節點在它的位置上一個接一個地出現 - 因此試圖改變樣式並重新繪製圖。增長表不工作,因爲節點改變位置。有任何想法嗎?

回答

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>