Cytoscape：单击时在 table 中显示 node/edge 属性

Question

我是 cytoscape.js 的初学者，因为我只是在 Flask 应用程序中渲染浅层网络。

目前我可以在悬停时显示节点和边缘属性，但信息出现在用户不友好的字典中。我想做的是在 node/edge 被点击后，在 table 中显示 node/edge 信息（暂时只说边缘）。

现在，在悬停时创建 popper 元素的函数是这样的：

function makePopper(ele) {
    let ref = ele.popperRef(); // used only for positioning
    ele.tippy = tippy(ref, {
      // tippy options:
      content: () => {
        let content = document.createElement("div");
        content.innerHTML = '<p>' + JSON.stringify(ele.data(), undefined, 2) + '</p>';
        return content;
      },
      trigger: "manual" // probably want manual mode
    });
  }

如您所见，innerHTML 填充了 ele.data（节点或边缘属性）。我想在 table 中呈现它。

我查了一下，好像没有人有同样的需求。

提前致谢

Answer 1

在工具提示中应包含哪些数据及其外观方面，您不受 Popper 或 Cytoscape.js 的限制，严格来说 HTML。

列名位于左侧的工作示例 - https://codepen.io/Raven0us/pen/ExVLEwj

/**
 *
 * @param target node or edge
 */
static bindPopper(target) {
    let tooltipId = `popper-target-${target.id()}`;

    // check if existing tooltip and remove if necessary
    let existingTarget = document.getElementById(tooltipId);
    if (existingTarget && existingTarget.length !== 0) {
        existingTarget.remove();
    }

    let popper = target.popper({
        content: () => {
            // create div container
            let tooltip = document.createElement('div');

            // adding id for easier JavaScript control
            tooltip.id = tooltipId;

            // adding class for easier CSS control
            tooltip.classList.add('target-popper');

            // create actual table
            let table = document.createElement('table');

            // append table to div container
            tooltip.append(table);
            let targetData = target.data();

            // loop through target data
            for (let prop in targetData) {
                if (!targetData.hasOwnProperty(prop)) continue;

                let targetValue = targetData[prop];
                // no recursive or reduce support
                if (typeof targetValue === "object") continue;

                let tr = table.insertRow();

                let tdTitle = tr.insertCell();
                let tdValue = tr.insertCell();

                tdTitle.innerText = prop;
                tdValue.innerText = targetValue;
            }

            document.body.appendChild(tooltip);

            return tooltip;
        }
    });

    target.on('position', () => {
        popper.scheduleUpdate();
    });

    target.cy().on('pan zoom resize', () => {
        popper.scheduleUpdate();
    });

    target.on('mouseover', () => {
        if (document.getElementById(tooltipId)) {
            document.getElementById(tooltipId).classList.add('active');
        }
    }).on('mouseout', () => {
        if (document.getElementById(tooltipId)) {
            document.getElementById(tooltipId).classList.remove('active');
        }
    })
}

如果您想要传统的 table，您可以获取 data 键并使用这些键创建一行。

let rowWithTitles = table.insertRow();
Object.keys(targetData).forEach(i => {
    rowWithTitles.insertCell().innerText = i;
})

Cytoscape：单击时在 table 中显示 node/edge 属性

Cytoscape: show node/edge attributes in table when clicking on it

python

flask

cytoscape.js