Skip to content

Commit

Permalink
chore: custom interaction case (#6454)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lxfu1
lxfu1 authored Sep 6, 2024
1 parent a0ce2cb commit d8d5394
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 74 deletions.
93 changes: 56 additions & 37 deletions site/docs/manual/core/interaction.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,47 +131,66 @@ If the built-in interaction cannot meet your needs, you can also implement some

```js | ob
(() => {
const chart = new G2.Chart();
const { Chart, PLOT_CLASS_NAME, ELEMENT_CLASS_NAME, register } = G2;

register('interaction.customElementHighlight', () => {
return (context, _, emitter) => {
const { container } = context;
const plotArea = container.querySelector(`.${PLOT_CLASS_NAME}`);
const elements = plotArea.querySelectorAll(`.${ELEMENT_CLASS_NAME}`);
const elementSet = new Set(elements);

const pointerover = (e) => {
const { target: element } = e;
if (!elementSet.has(element)) return;
element.style.stroke = "red";
element.style.lineWidth = 2;
};

const pointerout = (e) => {
const { target: element } = e;
if (!elementSet.has(element)) return;
element.style.stroke = null;
};

plotArea.addEventListener('pointerover', pointerover);
plotArea.addEventListener('pointerout', pointerout);
return () => {
plotArea.removeEventListener('pointerover', pointerover);
plotArea.removeEventListener('pointerout', pointerout);
};
};
})

const chart = new Chart();

chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'letter')
.encode('y', 'frequency')
.axis('y', { labelFormatter: '.0%' })
.state({
selected: { fill: '#f4bb51' }, // set selected state
unselected: { opacity: 0.6 }, // set unselected state
})
.interaction('elementSelect', true);
.data([
{ name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
{ name: "London", 月份: "Feb.", 月均降雨量: 28.8 },
{ name: "London", 月份: "Mar.", 月均降雨量: 39.3 },
{ name: "London", 月份: "Apr.", 月均降雨量: 81.4 },
{ name: "London", 月份: "May", 月均降雨量: 47 },
{ name: "London", 月份: "Jun.", 月均降雨量: 20.3 },
{ name: "London", 月份: "Jul.", 月均降雨量: 24 },
{ name: "London", 月份: "Aug.", 月均降雨量: 35.6 },
{ name: "Berlin", 月份: "Jan.", 月均降雨量: 12.4 },
{ name: "Berlin", 月份: "Feb.", 月均降雨量: 23.2 },
{ name: "Berlin", 月份: "Mar.", 月均降雨量: 34.5 },
{ name: "Berlin", 月份: "Apr.", 月均降雨量: 99.7 },
{ name: "Berlin", 月份: "May", 月均降雨量: 52.6 },
{ name: "Berlin", 月份: "Jun.", 月均降雨量: 35.5 },
{ name: "Berlin", 月份: "Jul.", 月均降雨量: 37.4 },
{ name: "Berlin", 月份: "Aug.", 月均降雨量: 42.4 },
])
.transform({ type: 'dodgeX' })
.encode('x', '月份')
.encode('y', '月均降雨量')
.encode('color', 'name')
.interaction('customElementHighlight', true);

// Bind interaction after rendering
chart.render().then((chart) => {
// Get G Canvas instance
const { canvas } = chart.getContext();

// Find graphic elements
const elements = canvas.document.getElementsByClassName(
G2.ELEMENT_CLASS_NAME,
);

// Highlight
for (const element of elements) {
element.addEventListener('mouseenter', () => {
element.style._fill = element.style.fill;
element.style.fill = 'red';
});

element.addEventListener('mouseleave', () => {
element.style.fill = element.style._fill;
});
}
});
chart.render();

return chart.getContainer();
})();
Expand Down
93 changes: 56 additions & 37 deletions site/docs/manual/core/interaction.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,47 +127,66 @@ chart.area():

```js | ob
(() => {
const chart = new G2.Chart();
const { Chart, PLOT_CLASS_NAME, ELEMENT_CLASS_NAME, register } = G2;

register('interaction.customElementHighlight', () => {
return (context, _, emitter) => {
const { container } = context;
const plotArea = container.querySelector(`.${PLOT_CLASS_NAME}`);
const elements = plotArea.querySelectorAll(`.${ELEMENT_CLASS_NAME}`);
const elementSet = new Set(elements);

const pointerover = (e) => {
const { target: element } = e;
if (!elementSet.has(element)) return;
element.style.stroke = "red";
element.style.lineWidth = 2;
};

const pointerout = (e) => {
const { target: element } = e;
if (!elementSet.has(element)) return;
element.style.stroke = null;
};

plotArea.addEventListener('pointerover', pointerover);
plotArea.addEventListener('pointerout', pointerout);
return () => {
plotArea.removeEventListener('pointerover', pointerover);
plotArea.removeEventListener('pointerout', pointerout);
};
};
})

const chart = new Chart();

chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'letter')
.encode('y', 'frequency')
.axis('y', { labelFormatter: '.0%' })
.state({
selected: { fill: '#f4bb51' }, // 设置选中状态
unselected: { opacity: 0.6 }, // 设置非选中状态
})
.interaction('elementSelect', true);
.data([
{ name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
{ name: "London", 月份: "Feb.", 月均降雨量: 28.8 },
{ name: "London", 月份: "Mar.", 月均降雨量: 39.3 },
{ name: "London", 月份: "Apr.", 月均降雨量: 81.4 },
{ name: "London", 月份: "May", 月均降雨量: 47 },
{ name: "London", 月份: "Jun.", 月均降雨量: 20.3 },
{ name: "London", 月份: "Jul.", 月均降雨量: 24 },
{ name: "London", 月份: "Aug.", 月均降雨量: 35.6 },
{ name: "Berlin", 月份: "Jan.", 月均降雨量: 12.4 },
{ name: "Berlin", 月份: "Feb.", 月均降雨量: 23.2 },
{ name: "Berlin", 月份: "Mar.", 月均降雨量: 34.5 },
{ name: "Berlin", 月份: "Apr.", 月均降雨量: 99.7 },
{ name: "Berlin", 月份: "May", 月均降雨量: 52.6 },
{ name: "Berlin", 月份: "Jun.", 月均降雨量: 35.5 },
{ name: "Berlin", 月份: "Jul.", 月均降雨量: 37.4 },
{ name: "Berlin", 月份: "Aug.", 月均降雨量: 42.4 },
])
.transform({ type: 'dodgeX' })
.encode('x', '月份')
.encode('y', '月均降雨量')
.encode('color', 'name')
.interaction('customElementHighlight', true);

// 渲染完成之后绑定交互
chart.render().then((chart) => {
// 获得 G Canvas 实例
const { canvas } = chart.getContext();

// 找到图形元素
const elements = canvas.document.getElementsByClassName(
G2.ELEMENT_CLASS_NAME,
);

// 高亮
for (const element of elements) {
element.addEventListener('mouseenter', () => {
element.style._fill = element.style.fill;
element.style.fill = 'red';
});

element.addEventListener('mouseleave', () => {
element.style.fill = element.style._fill;
});
}
});
chart.render();

return chart.getContainer();
})();
Expand Down

0 comments on commit d8d5394

Please sign in to comment.