Question

我的数据是Json对象的Json数组 -

var data = [{id: 0, reflexive: false}]

我想显示这些属性的表，其中key作为第一个td中的标签，而值是第二个td中的输入框中的值。所以对于上面的数据，我想要两行。具有第一个td值的第一行应该是id，第二个td值应该是0.同样在第二行中，第一个td值应该是自反的，第二个td值应该是false。

以下是我现在实施的代码 -

var table = d3.select("body").append("table")
        .attr("style", "margin-left: 250px; border: 2px"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

// append the header row
thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
        .text(function(column) { return column; });
        alert(data);

// create a row for each object in the data
var rows = tbody.selectAll("tr")
    .data(data[0].keys().length())
    .enter()
    .append("tr");

    var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {column: column, value: row[column]};
        });
    })
    .enter()
    .append("td")
.append("input")
.attr('disabled', null)
.attr("name", "byName")
.attr("type", "text")
.attr("value",function(d) { return d.value; })

return table;

但它将输出作为单行输出，其中键作为标题和td中的值。任何建议都会有所帮助。

Answer 1

我认为数据是这样的，而不是上面例子中的数组

var ob = {id: 0, reflexive: false};

你需要使这个键值成为这样的数组：

data = Object.keys(ob).map(function(k) { return {key:k, value:ob[k]} })

现在根据下面的数据制作一个表格和tr和tds：

var ob = {id: 0, reflexive: false};

data = Object.keys(ob).map(function(k) { return {key:k, value:ob[k]} })


var table = d3.select("body").append("table")
        .attr("style", "margin-left: 50px; border: 2px"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

// append the header row
thead.append("tr")
    .selectAll("th")
    .data(["Property Name", "Property Value"])
    .enter()
    .append("th")
        .text(function(d) { console.log(d);return d; });


// create a row for each object in the data
var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr");
    ///add the key in first td
    rows.append("td")
	.text(function(d) { ;return d.key; });
	///add the value in second td
    rows
    .append("td")
	.append("input")
	.attr('readonly', true)
	.attr("name", "byName")
	.attr("type", "text")
	.attr("value",function(d) { return d.value; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

使用Json Object在D3中创建表

1 个答案: