6

私は D3 を使用して HTML テーブルを描画しています。データ コレクションに新しいアイテムを追加すると、新しいアイテムがテーブルに正しく追加されます。

問題は、コレクション内の既存のオブジェクト (以下の backgroundJobs コレクション内のオブジェクト) を更新するたびに発生します。テーブルを同期するために D3 コードを再実行すると、機能しません。何も起こりません。

コードは次のとおりです。

var visibleColumns = ['Name', 'Start', 'End', 'Status', 'Metadata', 'Errors'];

var table = d3.select('#jobs').append('table');
var thead = table.append('thead');
var tbody = table.append('tbody');

thead.append("tr")
    .selectAll("th")
    .data(visibleColumns)
    .enter()
    .append("th")
    .text(function (column) { return column; });

function tick() {
    var rows = tbody.selectAll("tr")
        .data(backgroundJobs, function(d) {
            return d.name;
        })
        .enter()
        .append("tr");

    var cells = rows.selectAll("td")
        .data(function(row) {
            return [{column: 'Name', value: row.name},
                    {column: 'Start', value: row.startedTimestamp},
                    {column: 'End', value: row.endedTimestamp},
                    {column: 'Status', value: row.isRunning},
                    {column: 'Metadata', value: ''},
                    {column: 'Errors', value: row.errorMsg}];
        })
       .enter()
        .append("td")
        .text(function(d) { return d.value; });
}

setInterval(tick, 500);
4

3 に答える 3

9

データ結合のクールな説明を参照してください。

電話すると

tbody.selectAll("tr").data(some-new-data);

実際には 3 つの選択肢があります: 'enter' (新しい要素は DOM にまだ存在しない)、'exit' (DOM に存在するがデータには存在しない要素)、'update' (既に DOM に存在するノードを含む)上記の .data 呼び出しを介してデータが割り当てられています。

一般に、'enter' 選択では新しいノードを作成し、'exit' では古いノードを削除する必要があり、'update' では属性を変更するだけです。更新された「tick」機能コードを参照してください。

function tick() {
    var rows = tbody.selectAll("tr")
    .data(backgroundJobs, function(d) {
        return d.name;
    });

    rows.enter()
        .append("tr");

    rows.order();

    var cells = rows.selectAll("td")
        .data(function(row) {
            return [{column: 'Name', value: row.name},
                {column: 'Start', value: row.startedTimestamp},
                {column: 'End', value: row.endedTimestamp},
                {column: 'Status', value: row.isRunning},
                {column: 'Metadata', value: ''},
                {column: 'Errors', value: row.errorMsg}];
        });

    cells.enter()
        .append("td");

    cells.text(function(d) { return d.value;});

    cells.exit().remove();

    rows.exit().remove();
}

デモを参照してください(backgroundJobs は、ハードコードされた 2 つのデータセット間でタイマーで切り替えられます)。

于 2013-08-03T11:12:55.687 に答える
0

行を動的に追加および削除できるようにするために、この戦略が機能します。

// ROW MANAGEMENT

// select all tr elements
var tr = this.table.select("tbody").selectAll("tr").data(cur_data);

// exit rows
tr.exit().remove();

// enter rows
var trEnter = tr.enter().append("tr");

// CELL MANAGEMENT

trEnter.selectAll("td").data(function(d) { return d3.values(d); }).enter().append("td").text(function(d) { return d; });

// select all td elements
var td = tr.selectAll("td").data(function(d) { return d3.values(d); });

// exit cells
td.exit().remove();

// enter and update/add data to cells
td.enter().append("td");
td.text(function(d) { return d; });
于 2016-11-28T17:54:52.403 に答える