score:1

I had this problem as well. Issue is that the dom is getting rewritten due to reactive updates, and your on render select is getting destroyed.

How I solved this was to do a template helper at the end of the template. Something like this...

    <template name="ob">
        <h4>Table test- {{name}}</h4>
        <svg id="obTable"><table><tr></tr></table></svg>

        {{doD3Stuff}}

    </template>

    Template.ob.helpers(function() {
        doD3Stuff: function() {
        // all your on render code here
        //Width and height
        var w = 600;
        var h = 350;

        //Define key function, to be used when binding data
        var key = function (d) {
        return d.index;
        };

        //Create SVG element
        var svg = d3.select("#obTable")
        .attr("width", w)
        .attr("height", h);

        var dataset = require('../data/ob.json');
        // var dataset = Bars.find({}).fetch();


        //Select…
        var table = svg.selectAll('table').append('table')
        .style("border-collapse", "collapse")
        .style("border", "2px black solid");
        // .data(dataset, key);

        console.log(table);

        var rows = table.selectAll('tr')
        .data(dataset, key)
        .enter()
        .append('tr');

        console.log(rows);

        rows.selectAll('td')
        .data(function(d){ console.log(d); return d;} )
        .enter()
        .append('td')
        .text(function(d) {console.log("here"); return d;})
        .style("border", "1px black solid")
        .style("padding", "10px")
        .style("font-size","12px");
    }

Related Query

More Query from same tag