【V5】当存在分面且Y轴为多变量时，存在无法交互tooltip的问题

[Xiatian-leo]

问题描述

如题，V5中分面+多变量时存在tooltip方面的问题；

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .options({
    "autoFit": true,
    "margin": 80,
    "type": "facetRect",
    "encode": {
      "y": "group"
    },
    "interaction": {
      "tooltip": true
    },
    "data": [
      {
        "x": "Low",
        "y1": 5.1,
        "y2": 81,
        "group": "A",
      },
      {
        "x": "High",
        "y1": 6.3,
        "y2": 86,
        "group": "B",
      },

    ],
    "children": [
      {
        "encode": {
          "x": "x",
          "y": "y1",
          "shape": "point",
          "size": 10,
          "color": "x"
        },
        "type": "point"
      },
      {
        "encode": {
          "x": "x",
          "y": "y2",
          "shape": "square",
          "size": 10,
          "color": "x"
        },
        "type": "point"
      }
    ]
  })
chart.render();

具体截图如下：

重现链接

No response

重现步骤

代码如上

预期行为

期望tooltip能正常交互

平台

• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

把两个 point 放入一个 view，如下：

import { Chart } from "@antv/g2";

const chart = new Chart({
  container: "container",
  autoFit: true,
});

chart.options({
  autoFit: true,
  margin: 80,
  type: "facetRect",
  encode: {
    y: "group",
  },
  interaction: {
    tooltip: true,
  },
  data: [
    {
      x: "Low",
      y1: 5.1,
      y2: 81,
      group: "A",
    },
    {
      x: "High",
      y1: 6.3,
      y2: 86,
      group: "B",
    },
  ],
  children: [
    {
      type: "view",
      children: [
        {
          encode: {
            x: "x",
            y: "y1",
            shape: "point",
            size: 10,
            color: "x",
          },
          type: "point",
        },
        {
          encode: {
            x: "x",
            y: "y2",
            shape: "square",
            size: 10,
            color: "x",
          },
          type: "point",
        },
      ],
    },
  ],
});
chart.render();

[Xiatian-leo]

也就是说在使用facet时，就需要配合.view()使用吗？Y变量数量不同，表征也不同，设计理念方面能介绍一下吗

[pearmini]

也就是说在使用facet时，就需要配合.view()使用吗？Y变量数量不同，表征也不同，设计理念方面能介绍一下吗

不一定，只是 facet 的 children 默认是放入 layer 容器，而不是 view 里面的。你的这个例子可以用一个 fold transform，没必要用两个 point mark。

import { Chart } from "@antv/g2";

const chart = new Chart({
  container: "container",
  autoFit: true,
});

chart.options({
  autoFit: true,
  margin: 80,
  type: "facetRect",
  encode: {
    y: "group",
  },
  interaction: {
    tooltip: true,
  },
  data: {
    transform: [
      {
        type: "fold",
        key: "type",
        value: "y",
        fields: [
          "y1",
          "y2", // 添加更多的 y
        ],
      },
    ],
    value: [
      {
        x: "Low",
        y1: 5.1,
        y2: 81,
        group: "A",
      },
      {
        x: "High",
        y1: 6.3,
        y2: 86,
        group: "B",
      },
    ],
  },
  children: [
    {
      type: "point",
      encode: {
        x: "x",
        y: "y",
        shape: "type",
        size: 10,
        color: "x",
      },
      scale: {
        shape: { range: ["point", "square"] },
      },
    },
  ],
});

chart.render();

[Xiatian-leo]

好的，非常感谢，我会在具体场景里面试试Data-Transform相关API