Question

我是Vis.js和JavaScript的新手，但我愿意学习。我正在使用在悬停或选择时改变颜色的节点。如果我使用'dot'或'square'这样的形状就可以了，但是我想用离子等图标获得相同的行为。以下代码显示了我希望如何使其工作（使用选项设置）。我打算使用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>

Answer 1

嗯，正如您可以从docs看到的，对于image和circularImage形状，您可以设置image.unselected和image.selected个选项，尽管有{＆1}}不是image.hover或类似的。还有chosen节点选项，但根据文档，它不能包含影响节点图像的任何内容。所以我认为使用你提到的事件是一个合适的解决方案，有点直截了当。

Vis js ionicons节点在选中时会改变颜色

1 个答案: