Question

我正在尝试使用以下代码创建表。我是Java Script和其他库的初学者。下面的代码反映在Console中，但UI没有显示任何内容。我正在使用d3来创建SVG。我不确定这是混合D3和jquery的正确方法。任何人都可以建议什么是正确的方法。

我有一个表有固定数量的条目。在下面的代码中，Object是JSON Object。

var svg = d3.select(el[0])
.each(function() { this.focus(); })
.append("svg")
.attr("width", width)
.attr("height", height);


svg.append("text")
.attr("x", 0.5*width)  
.attr("y", 36)
.attr("text-anchor", "middle")  
.style("font-size", "36px") 
.style("text-decoration", "underline")  
.text(description);

var div=svg.append("div")
.attr("id","table");
var table = $('<table></table>').addClass('ex1');

var row = $('<tr></tr>').text('Device Name: ' +  Object.id);
table.append(row);
var row = $('<tr></tr>').text('Type: ' + Object.type);
table.append(row);
var row = $('<tr></tr>').text('IP Address: ' +Object.ipAddress);
table.append(row);
$('#table').append(table);

使用上面的代码，我可以在DOM Object中看到下面的元素。

*<svg width="1413" height="695">
    <text x="706.5" y="36" text-anchor="middle" style="font-size: 36px; text-decoration: underline;">
        Details Information for management1
    </text>
    <div id="table">
        <table class="ex1">
            <tbody>
                <tr>
                    Device Name: mg1
                </tr>
                <tr>
                    Type: Sw
                </tr>
                <tr>
                    IP Address: 1.1.1.1
                </tr>
            </tbody>
        </table>
    </div>
</svg>*

我可以在UI上看到management1的详细信息，但不能看到其他元素。

由于

Answer 1

HTML元素（如<div>和<table>）不是有效的SVG元素。可以使用<foreignObject> SVG元素在HTML中嵌入HTML。但你不能直接使用它们，就像你在这里尝试一样。

Answer 2

如果您打算在svg中创建一个表，那么stackoverflow中已有一个答案：

Create a table in SVG

SVG在浏览器上不显示任何内容

2 个答案: