3

有没有办法为“vis.js”库中的节点创建多行标题？

我尝试了一个像"hello \n hi"标题这样的字符串，但这不起作用。

如果我有一个超长标题，它将被渲染为一个超长行（有或没有\n） 当前效果

4

4 回答 4

5

你有两个选择。

在您的数据 obj 中，用于您的节点。

data_obj["title"] = "<pre>1</pre><pre>2</pre>"

或者

data_obj["title"] ="1 </br> 2</br>"

要么完成这项工作。

于 2017-07-26T00:35:46.937 回答
0

在我的项目中，我加载节点并调用将标签转换为正确格式的函数

// Here i just get the data that i passed from controller
var network_nodes = JSON.parse(document.getElementById("network_nodes").innerText);

nodes = new vis.DataSet(setLabels());

// I wanted to separate my label for every word but you can put here any label-formating function

function setLabels() { 
    network_nodes.forEach(function(node){
        node.label = node.label.split(" ").join("\n");
    });

    return network_nodes;
};
于 2017-08-14T14:23:33.207 回答
0

将 '\n' 替换为 '< br >' （不带空格）：

string = "hello <br> hi"
于 2018-10-08T07:20:19.230 回答
0

由于 vis.js 从数据集中制作 svg，并且标签<text>在 svg 中，因此在标签中您不能轻松制作多行。您必须使用<tspan>标签： https ://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html

例如：

<!DOCTYPE html>
    <HTML>
    <HEAD>
      <meta name="revisit-after" content="30 days" />
      <meta name="Content-Language" content="HU" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script language="JavaScript" type="text/javascript" src="./viz.js"></script>
    
        <style type="text/css">
            .tit {
                font-family: serif;
                font-size: 8px;
                fill: navy;
            } 
        </style>
    </HEAD>    
<BODY>
<div id="G"></div>
        <script type="text/javascript">
        var Skill = 'digraph Skill { '+
         'node [shape=record;]; rankdir=TD;splines=polyline;'+
        'P1 [label=" ¤";width=2.0;height=2.0;fillcolor=magenta;style=filled;fontcolor=black;];' 
        
           '}';
        
        var so = Viz(Skill);
        document.getElementById('G').innerHTML=so.replace(/¤/g, '<tspan class="tit" x="20px" dy="0em">Melee</tspan><tspan  class="tit" x="40px" dy="1em">+2.3 Melee Damage</tspan>');
        </script>
    </BODY>
    </HTML>

而不是上面，尝试使用嵌套字段，它更简单，但将行包装到盒子中：

 P1 [label="{Melee|+2.3 Melee Damage}";fillcolor=magenta;style=filled;fontcolor=black;]
于 2022-01-10T18:33:07.547 回答