javascript - chrome 中不显示 visjs 图标

Question

我在使用visjs时遇到了一个神秘的问题，显示网页时不显示节点的图标。仅在单击图标显示的区域后，图标才会出现。按照重现相同问题的 jsfiddle(不是我的): http://jsfiddle.net/adgd87/szt7h6kv/

这是代码:

    var nodeSet = [{
      id: 1,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf286',
    size: 40,
    color: '#57169a'
  },
  label: '1: fa-fort-awesome - f286',
}, {
  id: 2,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf1d1',
    size: 40,
    color: '#f0a30a'
  },
  label: '2: fa-empire - f1d1'
}];

// create an array with nodes
var nodes = new vis.DataSet(nodeSet);

// create an array with edges
var edges = new vis.DataSet([{
  from: 1,
  to: 2
}, {
  from: 1,
  to: 3
}]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  layout: {
    randomSeed: 2
  },
  edges: {
    arrows: 'to'
  },
  legend: {
    enabled: true
  }
};

var network = new vis.Network(container, data, options);

感谢您的任何提示

Answer 1

发生的情况是，绘图开始时字体尚未加载到页面中，并且由于字体图标通常使用通常不填充任何字符的 Unicode 空间，因此会显示一个正方形的矩形。加载字体后，绘图引擎可以使用正确的字体重新绘制，因此您将看到图像出现。通常绘图引擎使用惰性绘图技术，因此单击是触发它的简单方法。

但现在复杂的问题是:如何知道字体资源何时加载？跟踪字体的加载过程是一项极其复杂的任务，现在新的CSS Font Loading W3C spec正在解决这个问题。 。

它的支持还不是很好，正如您在 Can I use 上看到的那样页:

使用超时并不是一个解决方案，您只是打赌超时将在字体加载后不久触发。相信我，如果用户连接来自移动设备，则事实并非如此。

这意味着您需要一些帮助程序，幸运的是，存在一个跨浏览器帮助程序，它被称为 WebFontLoader .

你需要做的是预加载字体，然后启动你的 vuejs:

 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
 <script>
   WebFont.load({
     custom: {
      families: ['My Font']
     },
     // startYourChart is your function that starts the chart drawing
     // when the font is loaded start to draw the chart
     active: startYourChart,
     // The detection in older browser for FontAwesome doesn't always work
     // so this one makes sure that your chart starts after a loading timeout
     inactive: startYourChart
   });
 </script>

如果您使用 Angular，这里有一个方便的 WebFontLoader 包装器:angular-webfontlaoder 。在 example.html 中，它展示了如何使用它:

var app = angular.module('TestApp', ['webfont-loader']);
app.controller('TestController', function($scope) {
  $scope.$on('webfontLoader.loaded', function() {
    alert('font loaded!');
  });
});

附注有关字体加载如何工作以及优化它的策略的更多信息，请参见一些有趣的页面:

• Controlling Font Performance with font-display
• Better @font-face with Font Load Events
• A Comprehensive Guide to Font Loading Strategies