Javascript vis.js中的多节点选择

我使用vis.js是因为我喜欢它的网络可视化模块。我想知道，因为我在文档中找不到它，是否可以选择多个节点

干杯

---

Riccardo

我刚刚发现，在vis.js中，您可以长按多个节点来选择它们。

在以下位置的文档中搜索“可选”属性：

如果为true，则可以通过单击节点来选择网络中的节点。长的 按可用于选择多个节点

更新！ 文档的链接是

将multiselect属性设置为true

将此节添加到网络选项对象

interaction: { multiselect: true}

---

如果您正在寻找一个矩形来选择节点，只需查看visjs network github上的以下线程：

完整演示代码：

const nodes = new vis.DataSet([
    { id: 1, label: 'Node 1' },
    { id: 2, label: 'Node 2' },
    { id: 3, label: 'Node 3' },
    { id: 4, label: 'Node 4' },
    { id: 5, label: 'Node 5' }
]);

const edges = new vis.DataSet([
    { from: 1, to: 3 },
    { from: 1, to: 2 },
    { from: 2, to: 4 },
    { from: 2, to: 5 }
]);

const options = {
    layout: { randomSeed: 2 },
    interaction:{
    hover: true,
        multiselect: true
    }
};

// Everything is in there
const makeMeMultiSelect = (container, network, nodes) => {
    const NO_CLICK = 0;
    const RIGHT_CLICK = 3;

    // Disable default right-click dropdown menu
    container[0].oncontextmenu = () => false;

    // State

    let drag = false, DOMRect = {};

    // Selector

    const canvasify = (DOMx, DOMy) => {
        const { x, y } = network.DOMtoCanvas({ x: DOMx, y: DOMy });
        return [x, y];
    };

    const correctRange = (start, end) =>
        start < end ? [start, end] : [end, start];

    const selectFromDOMRect = () => {
        const [sX, sY] = canvasify(DOMRect.startX, DOMRect.startY);
        const [eX, eY] = canvasify(DOMRect.endX, DOMRect.endY);
        const [startX, endX] = correctRange(sX, eX);
        const [startY, endY] = correctRange(sY, eY);

        network.selectNodes(nodes.get().reduce(
            (selected, { id }) => {
                const { x, y } = network.getPositions(id)[id];
                return (startX <= x && x <= endX && startY <= y && y <= endY) ?
                    selected.concat(id) : selected;
            }, []
        ));
    }

    // Listeners

    container.on("mousedown", function({ which, pageX, pageY }) {
        // When mousedown, save the initial rectangle state
        if(which === RIGHT_CLICK) {
            Object.assign(DOMRect, {
                startX: pageX - this.offsetLeft,
                startY: pageY - this.offsetTop,
                endX: pageX - this.offsetLeft,
                endY: pageY - this.offsetTop
            });
            drag = true;
        }
    });

    container.on("mousemove", function({ which, pageX, pageY }) {
        // Make selection rectangle disappear when accidently mouseupped outside 'container'
        if(which === NO_CLICK && drag) {
            drag = false;
            network.redraw();
        }
        // When mousemove, update the rectangle state
        else if(drag) {
            Object.assign(DOMRect, {
                endX: pageX - this.offsetLeft,
                endY: pageY - this.offsetTop
            });
            network.redraw();
        }
    });

    container.on("mouseup", function({ which }) {
        // When mouseup, select the nodes in the rectangle
        if(which === RIGHT_CLICK) {
            drag = false;
            network.redraw();
            selectFromDOMRect();
        }
    });

    // Drawer

    network.on('afterDrawing', ctx => {
        if(drag) {
            const [startX, startY] = canvasify(DOMRect.startX, DOMRect.startY);
            const [endX, endY] = canvasify(DOMRect.endX, DOMRect.endY);

            ctx.setLineDash([5]);
            ctx.strokeStyle = 'rgba(78, 146, 237, 0.75)';
            ctx.strokeRect(startX, startY, endX - startX, endY - startY);
            ctx.setLineDash([]);
            ctx.fillStyle = 'rgba(151, 194, 252, 0.45)';
            ctx.fillRect(startX, startY, endX - startX, endY - startY);
        }
    });
}; // end makeMeMultiSelect

$(document).ready(() => {
    const container = $("#network");
    const network = new vis.Network(container[0], { nodes, edges }, options);
    makeMeMultiSelect(container, network, nodes);
});

const nodes=new vis.DataSet([
{id:1，标签：'Node 1'}，
{id:2，标签：'Node 2'}，
{id:3，标签：'Node 3'}，
{id:4，标签：'Node 4'}，
{id:5，标签：'Node 5'}
]);
const edges=new vis.DataSet([
{从：1到：3}，
{从：1到：2}，
{从：2到：4}，
{从：2到：5}
]);
常量选项={
布局：{randomSeed:2}，
互动：{
哈弗：没错，
多选：正确
}
};
//一切都在里面
const makeMeMultiSelect=（容器、网络、节点）=>{
const NO_CLICK=0；
常量右键单击=3；
//禁用默认的右键单击下拉菜单
容器[0]。oncontextmenu=（）=>false；
//陈述
让drag=false，DOMRect={}；
//选择器
const canvasify=（DOMx，DOMy）=>{
const{x，y}=network.DOMtoCanvas（{x:DOMx，y:DOMy}）；
返回[x，y]；
};
常数校正范围=（开始、结束）=>
开始<结束？[开始，结束]：[结束，开始]；
const selectFromDOMRect=（）=>{
const[sX，sY]=canvasify（DOMRect.startX，DOMRect.startY）；
const[eX，eY]=canvasify（DOMRect.endX，DOMRect.endY）；
常数[startX，endX]=校正范围（sX，eX）；
常数[startY，endY]=校正范围（sY，eY）；
network.selectNodes（nodes.get（）.reduce(
（选定，{id}）=>{
const{x，y}=network.getPositions（id）[id]；
返回（startX，因为您可以使用ctrl+click和shift+click进行多选。编辑：抱歉，这仅适用于时间线，网络尚不支持。长时间单击和ctrl+click也适用于网络，但仅当您启用多选时。有没有办法使用简单单击而不是长时间单击进行多选？您好，您可以使用绑定到事件selectNode和取消选择Node。通过这些事件，您可以知道所需的选定节点是什么。然后，您可以使用方法selectNodes。