Javascript 脚本未正确显示换行元素

我在js文件中有以下行代码：

 "label: " + node.label + $('</br>') + "id: " + node.id + $('</br>') + "size: " + node.size

标记未正确呈现。怎么了

这段代码来自sigma.js图形示例，该示例在节点悬停时生成工具提示

以下是代码的其余部分：

 sigma.canvas.hovers.def = function (node, context, settings) {
    var x,
        y,
        w,
        h,
        e,
        fontStyle = settings('hoverFontStyle') || settings('fontStyle'),
        prefix = settings('prefix') || '',
        size = node[prefix + 'size'],
        fontSize = (settings('labelSize') === 'fixed') ?
            settings('defaultLabelSize') :
            settings('labelSizeRatio') * size;

    // Label background:
    context.font = (fontStyle ? fontStyle + ' ' : '') +
        fontSize + 'px ' + (settings('hoverFont') || settings('font'));

    context.beginPath();
    context.fillStyle = settings('labelHoverBGColor') === 'node' ?
        (node.color || settings('defaultNodeColor')) :
        settings('defaultHoverLabelBGColor');

    if (settings('labelHoverShadow')) {
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 8;
        context.shadowColor = settings('labelHoverShadowColor');
    }

    if (typeof node.label === 'string') {
        x = Math.round(node[prefix + 'x'] - fontSize / 2 + 20);
        y = Math.round(node[prefix + 'y'] - fontSize / 40 - 80);
        w = Math.round(
            context.measureText("lable: " + node.label).width + fontSize / 2 + size + 7
        );
        h = Math.round(fontSize + 70);
        e = Math.round(fontSize / 20 + 1);

        context.moveTo(x, y + e);
        context.arcTo(x, y, x + e, y, e);
        context.lineTo(x + w, y);
        context.lineTo(x + w, y + h);
        context.lineTo(x + e, y + h);
        context.arcTo(x, y + h, x, y + h - e, e);
        context.lineTo(x, y + e);

        context.closePath();
        context.fill();

        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 0;
    }

    // Node border:
    if (settings('borderSize') > 0) {
        context.beginPath();
        context.fillStyle = settings('nodeBorderColor') === 'node' ?
            (node.color || settings('defaultNodeColor')) :
            settings('defaultNodeBorderColor');
        context.arc(
            node[prefix + 'x'],
            node[prefix + 'y'],
            size + settings('borderSize'),
            0,
            Math.PI * 2,
            true
        );
        context.closePath();
        context.fill();
    }

    // Node:
    var nodeRenderer = sigma.canvas.nodes[node.type] || sigma.canvas.nodes.def;
    nodeRenderer(node, context, settings);

    // Display the label:
    if (typeof node.label === 'string') {
        context.fillStyle = (settings('labelHoverColor') === 'node') ?
            (node.color || settings('defaultNodeColor')) :
            settings('defaultLabelHoverColor');

        context.fillText(
        "label: " + node.label + "<br/>" + "id: " + node.id + "<br/>" + "size: " + node.size,

        Math.round(node[prefix + 'x'] + size + 10),
            Math.round(node[prefix + 'y'] - 60)
        );
    }
};

sigma.canvas.hovers.def=函数（节点、上下文、设置）{
变量x，
Y
W
H
E
fontStyle=设置（“hoverFontStyle”）| |设置（“fontStyle”），
前缀=设置（“前缀”）| |“”，
大小=节点[前缀+size']，
fontSize=（设置（'labelSize'）=='fixed'）？
设置（'defaultLabelSize'）：
设置（“labelSizeRatio”）*尺寸；
//标签背景：
context.font=（fontStyle？fontStyle+“”：“”）+
fontSize+'px'+（设置（'hoverFont'）| |设置（'font'））；
context.beginPath（）；
context.fillStyle=设置（'labelHoverBGColor'）=='node'？
（node.color | |设置（'defaultNodeColor'））：
设置（'defaultHoverLabelBGColor'）；
if（设置（'labelHoverShadow'））{
context.shadowOffsetX=0；
context.shadowOffsetY=0；
context.shadowBlur=8；
context.shadowColor=设置（'labelHoverShadowColor'）；
}
if（typeof node.label=='string'）{
x=数学圆（节点[prefix+'x']-fontSize/2+20）；
y=数学圆（节点[前缀+y']-fontSize/40-80）；
w=数学圆(
context.measureText（“标签：+node.label”）.width+fontSize/2+size+7
);
h=数学四舍五入（fontSize+70）；
e=数学圆（fontSize/20+1）；
上下文。移动到（x，y+e）；
arcTo（x，y，x+e，y，e）；
lineTo（x+w，y）；
lineTo（x+w，y+h）；
lineTo（x+e，y+h）；
arcTo（x，y+h，x，y+h-e，e）；
lineTo（x，y+e）；
closePath（）；
context.fill（）；
context.shadowOffsetX=0；
context.shadowOffsetY=0；
context.shadowBlur=0；
}
//节点边界：
如果（设置（'borderSize'）>0）{
context.beginPath（）；
context.fillStyle=设置（'NodeOrderColor'）=='node'？
（node.color | |设置（'defaultNodeColor'））：
设置（'DefaultNodeOrderColor'）；
context.arc(
节点[前缀+x']，
节点[前缀+y']，
大小+设置（“边框大小”），
0,
Math.PI*2，
真的
);
closePath（）；
context.fill（）；
}
//节点：
var noderender=sigma.canvas.nodes[node.type]| | sigma.canvas.nodes.def；
nodeRenderer（节点、上下文、设置）；
//显示标签：
if（typeof node.label=='string'）{
context.fillStyle=（设置（'labelHoverColor'）=='node'）？
（node.color | |设置（'defaultNodeColor'））：
设置（'defaultLabelHoverColor'）；
context.fillText(
标签：“+node.label+”
“+”id:“+node.id+”
“+”大小：“+node.size，
数学圆（节点[前缀+x']+大小+10），
Math.round（节点[前缀+y']-60）
);
}
};

$（“
”）

为

br

元素生成DOM对象。如果要将

br

元素添加到正在构建的字符串中，只需使用

“
”

：

“标签：”+node.label+”
“+”id:“+node.id+”
“+”大小：”+node.size

---

至于为什么您的输出中有“node.label”而不是一些实际值，您的猜测和我的一样好，因为您没有向我们展示足够的代码来解决这个问题。

如果@JLRishe的解决方案有效，我很高兴。如果没有，您可以尝试以下方法：

"label: " + node.label + '\n' + "id: " + node.id + '\n' + "size: " + node.size

---

因此，

\n

而不是

您期望的输出是什么？看起来您试图在字符串中使用jQuery对象

$（“
”）

。我不确定你的代码在做什么，但试着用

（不要用$（）包装它）我想用'br'html标记在单独的行中显示标签、id和大小。@JohnRooney说你应该使用

，后面没有斜杠。我把所有的代码都添加到问题中。我的代码是sigma js图形示例的一部分。它会生成节点的工具提示。谢谢。看了你的代码之后，我仍然不确定为什么你的输出中有“node.label”（如果它真的有），但是我回答了你的问题了吗？

"label: " + node.label + "<br/>" + "id: " + node.id + "<br/>" + "size: " + node.size

"label: " + node.label + '\n' + "id: " + node.id + '\n' + "size: " + node.size