关于图形点击事件 about f2 HOT 13 CLOSED

目前 F2 没有开放事件接口，目前你这个需求的话，可以通过监听 canvas 元素上的 touchStart 事件，通过坐标来查找被点击的坐标轴文本 Shape，目前的方法操作了太多的内部属性，后续我会进行优化的，目前刚好也在集中进行交互和动画的加强优化，欢迎多提意见：

$('#mountNode').on('touchstart', function(e) {
    const canvas = chart.get('canvas');
    const point = { 
      x: e.targetTouches[0].clientX,
      y: e.targetTouches[0].clientY
    };
    const canvasPoint = F2.Util.getRelativePosition(point, canvas); // 将坐标转换为 canvas 相对坐标
    const backPlot = chart.get('backPlot'); // 默认坐标轴文本位于 backPlot 容器中
    const axisContainer = backPlot.get('children')[0];
    const axisShapes = axisContainer.get('children'); 
    // findShape
    let clickedShape;
    F2.Util.each(axisShapes, s => {
      const bbox = s.getBBox();
      if (canvasPoint.x >= bbox.minX && canvasPoint.x <= bbox.maxX
         && canvasPoint.y >= bbox.minY && canvasPoint.y <= bbox.maxY) {
      	clickedShape = s;
        console.log(s);
        return false;
      }
    });
    if (clickedShape) {
      console.log(clickedShape.attr('text')); // 被点击的坐标轴文本内容
    }
  });

from f2.

有的，下面是我们的钉钉群。

另外想请教下，您的 x 轴上的这种交互的具体场景是什么，是移动场景下的吗？我想了解下~~~ 哈哈

from f2.

我刚在G2 api下找到事件，但是应用到F2下不可用～场景是：统计一年销售额，点击x轴查看月份下，独立的各个部门的销售额（可以理解为数据下钻）。

from f2.

经测试，上诉代码报以下错误：F2.Util.getRelativePosition is not a function

from f2.

打印F2.Util可见只有

from f2.

Array
:
{merge: ƒ, values: ƒ, firstValue: ƒ, group: ƒ, groupToMap: ƒ, …}
deepMix
:
ƒ deepMix()
each
:
ƒ each(elements, func)
fixedBase
:
ƒ fixedBase(v, base)
getWrapBehavior
:
ƒ getWrapBehavior(obj, action)
indexOf
:
ƒ indexOf(arr, element)
isArray
:
ƒ isArray()
isBoolean
:
ƒ isBoolean(value)
isDate
:
ƒ isDate(value)
isFunction
:
ƒ isFunction(fn)
isNil
:
ƒ isNil(o)
isNumber
:
ƒ isNumber(value)
isObject
:
ƒ (value)
isPlainObject
:
ƒ isPlainObject(o)
isString
:
ƒ isString(value)
lowerFirst
:
ƒ lowerFirst(s)
mix
:
ƒ mix(dist, obj1, obj2, obj3)
parsePadding
:
ƒ parsePadding(padding)
upperFirst
:
ƒ upperFirst(s)
wrapBehavior
:
ƒ wrapBehavior(obj, action)

from f2.

升级下 F2 的版本~~~ 用最新版本稳定版本 3.1.3

from f2.

请查阅，是否还要引入f2-common/f2-simple 等文件？

from f2.

我在f2-common文件中依旧没发现getRelativePosition函数。

from f2.

1. 不需要引入 f2-common/f2-simple，这些是 F2 的简化版本，3.1.3 版本以上都会有 F2.Util 上的方法的
2. 升级的时候可以先删除原先的 node_modules，再 npm install
3. 你可以在你的页面上打印 F2.version 查看当前的版本
4. 确定下，您是直接引用 @antv/f2. 而不是微信小程序版本吧，我的回答都是基于你直接使用 @antv/f2 的npm 模块的

const F2 = require('@antv/f2');
console.log(F2.version)
console.log(F2.Util)

from f2.

经查源码，发现DomUtil包含getRelativePosition函数，Util.mix(Util, DomUtil); 也复制了该方法。 应该是安装版本时没删除，使用覆盖导致上述无法查找到getRelativePosition方法。现已正常，多谢。

from f2.

😄 👍

from f2.

有的，下面是我们的钉钉群。

另外想请教下，您的 x 轴上的这种交互的具体场景是什么，是移动场景下的吗？我想了解下~~~ 哈哈

有的，下面是我们的钉钉群。

另外想请教下，您的 x 轴上的这种交互的具体场景是什么，是移动场景下的吗？我想了解下~~~ 哈哈

请问现在钉钉群链接可以更新下吗，这个二维码已经失效了

from f2.