D3.js 使用meteor中的D3制作简单表格

我正在测试meteor中的d3.js。 当我试图制作一个简单的测试表时，遇到了一个麻烦

这是我的密码

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

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

我最不能理解的是，我可以看到来自行的日志消息。selectAll'td'.datafunctiond{console.logd；return d；}很好，但是我看不到来自.textfunctiond{console.loghere；return d；}的任何日志 我怀疑这可能是不显示表格的原因，但无法进一步解决

我从npm安装了d3，它的版本是4.10.0

---

如有任何建议，将不胜感激

我也有这个问题。问题是，由于响应式更新，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");
    }

你的数据集是什么样子的？只是简单的json数组，比如[{date:2013-01-01，close:45}，{date:2013-02-01，close:50}，{date:2013-03-01，close:55}，{date:2013-04-01，close:50}，{date:2013-05-01，close:45}，{date:2013-06-01，close:50}，{date:2013-07-01，close:50}，{日期：2013-08-01，截止日期：55}]

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