Cytoscape: 当点击表格时，显示表格中的nodeedge属性。

Question

我是cytoscape.js的初学者，因为我只是在flask App中渲染浅层网络。

目前我可以在悬停时显示节点和边缘属性，但信息显示在一个不友好的字典中。我想做的是，一旦节点被点击，就在一个表格中显示节点信息（比如说暂时只显示边缘）。

现在，在悬停时创建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（节点或边缘属性）填充了。我想将其呈现在一个表格中。

我搜索了一下，但似乎没有人有同样的需求。

先谢谢你

Answer 1

你不受Popper或Cytoscape.js的限制，当涉及到什么数据应该包含在你的工具提示中，以及它应该如何看起来，它是严格的HTML。

工作示例，列名在左边的------。https:/codepen.ioRaven0uspenExVLEwj。

/**
 *
 * @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');
        }
    })
}

如果你想买一张传统的桌子，你可以买到的是 data 并用这些键创建一行。

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