Amcharts部队指挥树上的交互式工具提示

问题描述

我正在尝试使用amcharts v4创建强制导向树，其中节点和链接都将具有自定义HTML并使用按钮与用户进行交互。对于节点，交互工作良好，因此在本示例中不包括它们。

问题是链接工具提示中的按钮不具有交互性（我也尝试过使用input type="button"，但结果是相同的。

const _chart = am4core.create(this.chartId,am4plugins_forceDirected.ForceDirectedTree);
const series = _chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());

const nodeRadius = 100;
const linkSize = 100;
const nodeSize = nodeRadius * 2;
const nodedistance = nodeSize + linkSize;

series.minRadius = series.maxRadius = nodeRadius;

series.datafields.id = 'id';
series.datafields.name = 'name';
series.datafields.value = 'value';
series.datafields.linkWith = 'linkWith';
series.datafields.fixed = 'fixed';
series.nodes.template.propertyFields.x = 'x';
series.nodes.template.propertyFields.y = 'y';
series.nodes.template.label.html = `
        <div>{data.name}</div>
        <button>
            <i class="icon-trash"></i>
        </button>
    `;
// The next 2 lines don't seem to have an effect:
series.links.template.interactionsEnabled = true;
series.links.template.clickable = true;
series.links.template.tooltipHTML = `<input type="button" value="TEST" onclick="alert('hello')"></input>`;

series.links.template.events.on('hit',(event) => {
    // Here I have clicks on link but not on link's tooltip.
});
series.links.template.showTooltipOn = 'always';
series.links.template.distance = 2;

series.data = [
    {
        id: '3',name: 'Element 3',value: 1,linkWith: ['4'],data: {
            name: 'Element 3',},fixed: true,x: nodeRadius + nodedistance,y: nodeRadius + nodedistance,{
        id: '4',name: 'Element 1',data: {
            name: 'Element 1',x: nodeRadius + 0,y: nodeRadius + nodedistance / 2,{
        id: '7',name: 'Element 2',data: {
            name: 'Element 2',y: nodeRadius + 0,];

如何使工具提示中的按钮对单击事件做出反应？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

amcharts amcharts4