Google Chart内のテキストアンカーのselectイベントをトリガする方法は？

Question

私はGoogleグラフからtreemapを使用しています。ユーザーがノードを選択したときにいくつかのアクションを実行します。グラフのAPIから「選択」リスナーを使用しています。ノード内のテキストはクリックしても、ノード内のテキストはクリックしないとうまくいきます（jsfiddle：https://jsfiddle.net/a93b9va3/参照）。

google.visualization.events.addListener(tree, 'select', 
       function() {alert('something selected!')}); 

誰かがテキストをクリックしたときにも、どのように選択イベントをトリガーできますか？そのようなあなたがイベントを添付する場合は、ツリー

の一部を選択するよう

Answer 1

活動が発生したときにこの問題の

一部には標準のチャートオプションは、チャートのSVGの特定の部分が再描画されない、
あなたが使用できる<text>要素、
最終的には、その要素を取り外して交換することができ、
イベントハンドラ

への参照を失います常に最後の要素にイベントをアタッチするMutationObserver表示さ
jqueryのがイベントをリッスンするために使用され、ここでの作業スニペット

を次のように表示...
（ラベルをクリックしてください）

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'], 
 
    ['Global', null,     0,        0], 
 
    ['America', 'Global',    0,        0], 
 
    ['Europe', 'Global',    0,        0], 
 
    ['Asia',  'Global',    0,        0], 
 
    ['Australia', 'Global',    0,        0], 
 
    ['Africa', 'Global',    0,        0], 
 
    ['Brazil', 'America',   11,        10], 
 
    ['USA',  'America',   52,        31], 
 
    ['Mexico', 'America',   24,        12], 
 
    ['Canada', 'America',   16,        -23], 
 
    ['France', 'Europe',    42,        -11], 
 
    ['Germany', 'Europe',    31,        -2], 
 
    ['Sweden', 'Europe',    22,        -13], 
 
    ['Italy',  'Europe',    17,        4], 
 
    ['UK',  'Europe',    21,        -5], 
 
    ['China',  'Asia',    36,        4], 
 
    ['Japan',  'Asia',    20,        -12], 
 
    ['India',  'Asia',    40,        63], 
 
    ['Laos',  'Asia',    4,        34], 
 
    ['Mongolia', 'Asia',    1,        -5], 
 
    ['Israel', 'Asia',    12,        24], 
 
    ['Iran',  'Asia',    18,        13], 
 
    ['Pakistan', 'Asia',    11,        -52], 
 
    ['Egypt',  'Africa',    21,        0], 
 
    ['S. Africa', 'Africa',    30,        43], 
 
    ['Sudan',  'Africa',    12,        2], 
 
    ['Congo',  'Africa',    10,        12], 
 
    ['Zaire',  'Africa',    8,        10] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var tree = new google.visualization.TreeMap(container); 
 

 
    var observer = new MutationObserver(function() { 
 
    $('text[text-anchor="middle"]').on('mousedown', function (sender) { 
 
     console.log($(sender.target).text()); 
 
    }); 
 
    }); 
 
    observer.observe(container, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    tree.draw(data, { 
 
    minColor: '#f00', 
 
    midColor: '#ddd', 
 
    maxColor: '#0d0', 
 
    headerHeight: 15, 
 
    fontColor: 'black', 
 
    showScale: true 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>