javascript - 脚本未正确显示断线元素

Question

我在 js 文件中有这行代码:

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

但是，当我运行它时，它返回:

 label: node.label[object-object]id: node.id[object-object]size: node.size

<br>标签未正确呈现。怎么了？

该代码片段来自 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)
        );
    }
};

Answer 1

$('<br/>')为 br 生成一个 DOM 对象元素。如果你想添加br元素到您正在构建的字符串，只需使用 "<br/>" :

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

至于为什么你的输出中有“node.label”而不是一些实际值，你的猜测和我的一样好，因为你没有向我们展示足够的代码来弄清楚这一点。