diff --git a/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-children-text/step0.svg b/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-children-text/step0.svg new file mode 100644 index 0000000000..7696b01d95 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-children-text/step0.svg @@ -0,0 +1,542 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Tokyo + + + + + + + + + + + + + + + + + + + + London + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 当前点London温度最高 + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index 5a23266c39..95d380fb82 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -12,6 +12,7 @@ export { stateAgesIntervalSelectByX } from './stateages-interval-select-by-x'; export { gdp2PointFisheye } from './gdp2-point-chart-fisheye'; export { indicesLineChartIndexSeries } from './indices-line-chart-index-series'; export { temperaturesLineLegendFilterOrdinal } from './temperatures-line-legend-filter-ordinal'; +export { temperaturesLineLegendFilterChildrenText } from './temperatures-line-legend-filter-children-text'; export { profitIntervalLegendFilterOrdinal } from './profit-interval-legend-filter-ordinal'; export { penguinsPointBrush } from './penguins-point-brush'; export { penguinsPointBrushX } from './penguins-point-brush-x'; diff --git a/__tests__/plots/interaction/temperatures-line-legend-filter-children-text.ts b/__tests__/plots/interaction/temperatures-line-legend-filter-children-text.ts new file mode 100644 index 0000000000..224fa5f3f7 --- /dev/null +++ b/__tests__/plots/interaction/temperatures-line-legend-filter-children-text.ts @@ -0,0 +1,43 @@ +import { G2Spec } from '../../../src'; +import { temperatures } from '../../data/temperatures'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { step } from './utils'; + +export function temperaturesLineLegendFilterChildrenText(): G2Spec { + return { + type: 'view', + data: temperatures, + encode: { + x: 'month', + y: 'temperature', + color: 'city', + }, + children: [ + { + type: 'line', + }, + { + type: 'point', + style: { + shape: 'point', + }, + }, + { + type: 'text', + data: ['Jul', 17], + encode: { + text: '当前点London温度最高', + color: 'London', // 加上 color encode + }, + style: { fill: '#000' }, + }, + ], + }; +} + +temperaturesLineLegendFilterChildrenText.steps = ({ canvas }) => { + const { document } = canvas; + const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + const [e0, e1] = elements; + return [step(e0, 'click')]; +}; diff --git a/src/transform/filter.ts b/src/transform/filter.ts index a9fc86214e..024f8e2823 100644 --- a/src/transform/filter.ts +++ b/src/transform/filter.ts @@ -48,7 +48,9 @@ export const Filter: TC = (options = {}) => { key, { ...encode, - value: newIndex.map((i) => encode.value[FI[i]]), + value: newIndex + .map((i) => encode.value[FI[i]]) + .filter((v) => v !== undefined), }, ]; });