制作一个简单的表在流星中使用D3

Question

我正在测试流星中的d3.js。 虽然试图做一个简单的测试表，我遇到了麻烦。

这里是我的代码

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

及以下是上面的模板JavaScript文件...

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

我有没有上面那些代码中的错误，但是当我执行我的应用程序，我看不到任何表格或表格内容。 （因为我可以很好地看到内容，所以我确信显示模板本身没有问题）

我不能理解的事情是我可以看到来自rows.selectAll('td').data(function(d){ console.log(d); return d;})的日志消息，但我看不到任何日志.text(function(d) {console.log("here"); return d;}) 我怀疑这可能是不显示表的原因，但无法进一步解决。

我安装NPM D3和它的版本是4.10.0

任何意见将不胜感激。

Answer 1

我也有这个问题。问题在于dom由于被动更新而被重写，并且你的渲染选择正在被破坏。

我如何解决这个问题是在模板的末尾做一个模板助手。像这样...

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