Making a simple table Using D3 in meteor - d3.js

Question

I am testing d3.js in meteor.
While trying to make a simple table for test,I met a trouble.
Here is my codes
<template name="ob">
<h4>Table test- {{name}}</h4>
<svg id="obTable"><table><tr></tr></table></svg>
</template>
And below is javascript file for template above...
Template.ob.onRendered(function() {
//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");
});
I've got no errors from those code above, but when I execute my app, I could not see any table or table contents. ( since I can see in contents well, I am sure there is no problem on showing template itself)
Things that I can't most understand is that I can see log messages from rows.selectAll('td').data(function(d){ console.log(d); return d;} ) well, but I can't see any log from .text(function(d) {console.log("here"); return d;})
I doubt this could be a reason for not showing table, but could not solve further.
I installed d3 from npm and it's version is 4.10.0
Any advice would be greatly appreciated.

Answer 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");
}