1

我是 Vis.js 和 JavaScript 的新手，但我愿意学习。我使用的节点在悬停或选择时会改变颜色。如果我使用像“点”或“方形”这样的形状，那没关系，但我想用像离子图标这样的图标来获得相同的行为。以下代码显示了我希望如何让它工作（使用选项设置）。我计划使用selectNode和hoverNode事件并更新组（需要为选定或悬停的节点创建特定组），但我认为有一种更简单的方法来完成它。你能给我一些建议吗？这是我的代码：

// create an array with nodes
var nodes = new vis.DataSet([{
    id: 1002,
    label: 'Juan',
    title: 'Juan Diaz Salizar',
    group: 'group_1'
  },
  {
    id: 1003,
    label: 'Martin',
    title: 'Sin datos',
    group: 'group_2'
  },
  {
    id: 1004,
    label: 'Pedro',
    title: 'Pedro Diaz Alcaraz',
    group: 'group_2'
  },
  {
    id: 1007,
    label: 'Vanessa',
    title: 'Juan Diaz Salizar',
    group: 'group_1'
  }
]);
// create an array with edges
var edges = new vis.DataSet([{
    from: 1003,
    to: 1002,
    label: 'tc 1',
    arrows: 'to'
  },
  {
    from: 1004,
    to: 1003,
    label: 'tc 2',
    arrows: 'to'
  },
  {
    from: 1007,
    to: 1003,
    label: 'tc 2',
    arrows: 'to'
  },
  {
    from: 1007,
    to: 1004,
    label: 'tc',
    arrows: 'to'
  }
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};

var options = {
  interaction: {
    hover: true
  },
  edges: {
    font: {
      size: 11,
      color: 'rgb(46,117,182)'
    },
    color: {
      color: 'rgb(189,215,238)',
      hover: 'rgb(46,117,182)'
    }
  },
  nodes: {
    size: 10
  },
  groups: {
    group_1: {
      shape: 'dot',
      color: {
        background: 'rgb(189,215,238)',
        border: 'rgb(46,117,182)',
        hover: {
          background: 'rgb(46,117,182)',
          border: 'rgb(46,117,182)'
        },
        highlight: {
          background: 'rgb(46,117,182)',
          border: 'rgb(46,117,182)'
        }
      },
      font: {
        size: 11,
        color: 'rgb(46,117,182)'
      }
    },
    group_2: {
      shape: 'icon',
      icon: {
        face: 'Ionicons',
        code: '\uf2d2',
        size: 20,
        color: {
          background: 'rgb(189,215,238)',
          border: 'rgb(46,117,182)',
          hover: {
            background: 'rgb(46,117,182)',
            border: 'rgb(46,117,182)'
          },
          highlight: {
            background: 'rgb(46,117,182)',
            border: 'rgb(46,117,182)'
          }
        }
      },
      font: {
        size: 11,
        color: 'rgb(46,117,182)'
      }
    }
  }
};

var network = new vis.Network(container, data, options);
#mynetwork {
  width: 85%;
  height: 600px;
  border: 1px solid lightgray;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<div id="mynetwork"></div>

4

1 回答 1

0

好吧，正如您从docs中看到的那样，您可以设置forimage和circularImageshapesimage.unselected和image.selectedoptions，尽管没有image.hover或类似的。还有chosen节点选项，但根据文档，它不能包含任何影响节点图像的内容。所以我认为使用你提到的事件是一个正确的解决方案，有点直截了当。

于 2018-05-21T20:54:49.793 回答