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

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

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

1 个答案: