Old school D3 from simpler times

All examples By author By category About

tmcw

Full window Github gist

d3 tag editing

<!DOCTYPE html>
<head>
    <meta charset='utf-8'>
    <title>d3 input table</title>
    <style>
        body {
            font:normal 14px/20px 'Helvetica Neue', sans-serif;
        }
    </style>
</head>
<body>
    <script src='https://d3js.org/d3.v2.min.js?2.9.1'></script>
    <script>

var data = {
            foo: 'bar',
            yes: 'no'
        };
        var columns = ['key', 'value']
        var table = d3.select(document.body).append('table');

table.append('thead').append('tr').selectAll('th')
            .data(['tag', 'value']).enter()
            .append('th').text(String);

var tbody = table.append('tbody');

function draw(data) {
            tr = tbody.selectAll('tr')
                .data(d3.entries(data));
            tr.exit().remove();
            row = tr.enter().append('tr');
            valuetds = row.selectAll('td')
                .data(function(d) { return [d, d]; });
            valuetds.enter().append('td').append('input')
                .property('value', function(d, i) { return d[i ? 'value' : 'key']; })
                .on('keyup', function(d, i) {
                    d[i ? 'value' : 'key'] = this.value;
                    print();
                });
        }

draw(data);

d3.select(document.body).append('pre');

function print() {
            var grabbed = {};
            function grab(d) { grabbed[d.key] = d.value; }
            tbody.selectAll('td').each(grab)
            d3.select('pre').text(JSON.stringify(grabbed, null, 4));
            if (!grabbed['']) {
                grabbed[''] = '';
                draw(grabbed);
            }
            draw(grabbed);
        }

print();
    </script>
</body>

Modified http://d3js.org/d3.v2.min.js?2.9.1 to a secure url

https://d3js.org/d3.v2.min.js?2.9.1