Vis.js网络节点定制：卡片作为节点 [英] Vis.js network node customization: cards as nodes

问题描述

我想建立一个网络，其中节点代表与卡类似构造的信息。

据我可以从vis.js文档中看到在此处查看示例，可以将段落/文本输入为节点标签，但无法通过Html构建节点。

我可以通过使用vis.js / Network达到此目的，还是应该去另一个图书馆？

解决方案

不幸的是，没有。截至2018年1月，节点标签通常不支持HTML （它们是因此将任意html片段合并到它中并不容易）。只有一个有限的标记（html模拟和markdown），允许同一标签中的多个字体大小/颜色/系列（最多4个，afaik，= plain和内部< b> ，< i> 和< code> tags）+您可以使用图片作为节点的形状（ shape：'icon'或'image'或'circularImage' ）。

这里可以找到multifont方法的使用示例：它们定义了

  var options = {
节点：{
字体：{
 multi：true，
 bold：{
 mod：''，
 color：'＃ff0000'
} 
} 
} 
} 
  

标签：

 标签：'< b> 3306< / b> \\\
3307\\\
3308'
  

考虑到t他特别的卡片情况（desribed在评论中）

你可以创建一个多行textarea，但创建按钮只能用黑客方式。您可以尝试以下解决方法：

• 将按钮添加为使用自定义点击处理程序悬停在卡本身上方的新网络节点;


• 如果您需要通过拖放来移动此类卡片，则您还需要在卡片被选中时选择与该卡片相对应的所有按钮节点，并选择与非卡片区分的按钮 - 选定的状态。

这可能会有一些副作用/涉及大量附加编码，但至少会像您一样工作描述。

PS：html内SVG技术

在这个问题作者使用一种有趣的技术，使用SVG将html注入到vis.js图中。我不知道这种技术的局限性（除了只能插入非交互式html），所以可能值得一试。

I would like to build a network where the nodes represent information that is structured similarly to cards.

As far as I could see from the vis.js documentation see example here, it is possible to enter paragraph/text as a node label but there is no way to structure a node via Html.

Can I reach this by using vis.js/Network or should I go for another library?

解决方案

Unfortunately, no. As of Jan 2018, node labels don't support html in general (they are a part of canvas so it's not easy to incorporate arbitrary html pieces into it). There's only a limited markup (both html-emulating and markdown) which allows several font sizes/colors/families in the same label (up to 4, afaik, = plain and inside <b>, <i> and <code> "tags") + you may use an image as the node's shape (shape: 'icon' or 'image' or 'circularImage').

Here you may find an example of usage of the multifont approach: they define

var options = {
  nodes: {
    font: {
      multi: true,
      bold: {
        mod: '',
        color: '#ff0000'
      }
    }
  }
}

in options and such label for a node:

label: '<b>3306</b>\n3307\n3308'

Considering the particular "cards case" (desribed in comments)

You can create a multi-line textarea indeed, but creating buttons is only possible in a hacky way. You can try the following workaround:

• add buttons as new network nodes hovering above the card itself with custom click handlers;
• if you need to move such cards as a whole via drag&drop, you have also to select all "button nodes" corresponding to the card when the card gets selected and make selection of those buttons indistinguishable from the non-selected state.

This may have some side-effects/involve an amount of additional coding, but at least will work like you have described.

PS: html inside SVG technique

In this question the author uses an interesting technique of injecting html into a vis.js graph using SVGs. I'm not aware of limits of that technique (aside that only non-interactive html can be inserted) so may be it deserves a try.

这篇关于Vis.js网络节点定制：卡片作为节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！