G2 Charting Tips｜4.x ラジオモードのレジェンド・サポート

g2 バージョン4.xの伝説的な無線モードのサポート

前回の投稿では、マウスのスワイプインに対応したツールチップの落とし穴とその解決方法を紹介しました。今日は別の問題に遭遇しました：

selectedMode 属性の削除，4.0 これはカスタムインタラクションでできる* 

G2 4.xのアップグレードガイドでは、新バージョンではse;ectedMode属性が削除され、無線機能がサポートされないと書かれており、公式サイトにも具体的なアップグレードガイドはなく、githubのissueがそのままクローズされたことも含め、この問題をスルーしています。

カスタムインタラクション

この問題を解決するために、ドキュメントとソースコードにも目を通し、以下のインターフェイスを持つカスタムインタラクションの基本的な実装を見てみました：

G2.registerInteraction(name, InteractionClass | InteractionSteps);

例えば、ツールチップのデフォルトのインタラクションは -custom interaction で実現できます。しかし、結局のところ、ラジオ選択はサポートできないので、インタラクションイベントを自分で書く必要があります：

registerInteraction('single-legend', {
 showEnable: [
 { trigger: 'legend-item:mouseenter', action: 'cursor:pointer' },
 { trigger: 'legend-item:mouseleave', action: 'cursor:default' },
 ],
 start: [
 {
 trigger: 'legend-item:click',
 action: 'single-selected:single',
 },
 {
 trigger: 'legend-item:click',
 action: 'list-unchecked:toggle',
 },
 {
 trigger: 'legend-item:click',
 action: 'data-filter:filter',
 },
 ],
})

'single-selected:single'start属性では、カスタム名のアクションも追加され、これもカスタムなので、同様に手動でコーディングしなければなりません：

/**
 * ソースコードには多くのイベントが登録されている， list-* 凡例の一部である関連イベントは、名前を渡すと基本クラスのActionを取得できる。
 */
class SingleSelected extends getActionClass('list-unchecked') {
 single() {
 const triggerInfo = this.getTriggerListInfo()
 if (triggerInfo && triggerInfo.item) {
 const { list, item } = triggerInfo
 const items = list.getItems()
 items.forEach(v => {
 // ここでは、name属性は渡されるデータに基づいて判断することができる。
 if (v.name === item.name) {
 item.active = true
 this.setItemState(list, item, true)
 } else {
 v.active = false
 this.setItemState(list, v, true)
 }
 })
 }
 }
}

上記のカスタムインタラクションをカスタムアクションのコードにマージすることで、単一選択の問題が解決されます：

import { registerInteraction, registerAction, getActionClass } from '@antv/g2'
/**
 * ソースコードには多くのイベントが登録されている， list-* 凡例の一部である関連イベントは、名前を渡すと基本クラスのActionを取得できる。
 */
class SingleSelected extends getActionClass('list-unchecked') {
 single() {
 const triggerInfo = this.getTriggerListInfo()
 if (triggerInfo && triggerInfo.item) {
 const { list, item } = triggerInfo
 const items = list.getItems()
 items.forEach(v => {
 // ここでは、name属性は渡されるデータに基づいて判断することができる。
 if (v.name === item.name) {
 item.active = true
 this.setItemState(list, item, true)
 } else {
 v.active = false
 this.setItemState(list, v, true)
 }
 })
 }
 }
}
registerAction('single-selected', SingleSelected)
registerInteraction('single-legend', {
 showEnable: [
 { trigger: 'legend-item:mouseenter', action: 'cursor:pointer' },
 { trigger: 'legend-item:mouseleave', action: 'cursor:default' },
 ],
 start: [
 {
 trigger: 'legend-item:click',
 action: 'single-selected:single',
 },
 {
 trigger: 'legend-item:click',
 action: 'list-unchecked:toggle',
 },
 {
 trigger: 'legend-item:click',
 action: 'data-filter:filter',
 },
 ],
})

その他

この件に関してG2にも問題を提起しました。正確なリンクは興味のある方はgithubをブラウズしてください。