D3 Examples - d3 tag editing

xxxxxxxxxx
 
<!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>
​
    