Integrating D3 in Meteor

1

I’m not sure how to write out my HTML file, I’m quite sure something is missing. Can you let me know what it is

> <head>
>   <title>D3</title>
> </head>

> <body>
>   <h1>Welcome to D3!</h1>


> <body>
> <script src="//d3js.org/d3.v3.min.js"></script>

> </body>

My js file is



> import { Template } from 'meteor/templating';
> import { ReactiveVar } from 'meteor/reactive-var';

> import './main.html';


> var w = 960,
> h = 500,
> start = Date.now();

> var rings = [
>     {radius: 65 * 1, width: 16, speed: -3e-2},
>     {radius: 65 * 2, width: 16, speed: -2e-2},
>     {radius: 65 * 3, width: 16, speed: -1e-2},
>     {radius: 65 * 4, width: 16, speed: 1e-2},
>     {radius: 65 * 5, width: 16, speed: 2e-2},
>     {radius: 65 * 6, width: 16, speed: 3e-2}
> ];

> var svg = d3.select("body").append("svg")

> var svg = d3.select("body").append("svg")
>     .attr("width", w)
>     .attr("height", h)
>     .append("g")
>     .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6);

> var ring = svg.selectAll("g")
>         .data(rings)
>         .enter().append("g")
>         .attr("class", "ring")
>         .each(ringEnter);

> d3.timer(function() {
>     var elapsed = Date.now() = start,
>         rotate = function(d) { return "rotate(" + d.speed * elapsed + ")";};

>     ring
>             .attr("transform", rotate)
>             .selectAll("rect")
>                 .attr("transform", rotate);
>     });

> function ringEntrance(d, i) {
>     var n = Math.floor(2 * Math.PI * d.radius / d.width * Math.SQRT1_2),
>         k = 360 / n;

> d3.select(this).selectAll("g")
>     .data(d3.range(n).map(function() { return d;}))
>     .enter().append("g")
>     .attr("class", "square")
>     .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
>   .append("rect")
>     .attr("x", -d.width / 2)
>     .attr("y", -d.width / 2)
>     .attr("width", d.width)
>     .attr("height", d.width);
> }
2 
meteor create playd3
cd play d3
meteor npm i -S d3

open project in your editor

main.html

body add a div#d3-container

main.js

import d3 from 'd3'


Template.body.onRendered(function () {
 d3.select('#d3-container').append('<h1>hello kitty</h1>')
})

template you can

<template name='d3template'>
  <div id="d3-container"></div>
</template>

Template.d3template.onRendered(function () {
  d3 append
})
3

Think I’m close, was that template render file suppose to be in the Js file?

Html

> <head>
>   <title>D3</title>
> </head>

> <body>
>   <h1>Welcome to D3!</h1>


> <body>
>     <div id="#d3-container"></div>
> </body>

> <template name="d3template">
>     <div id="d3-container"></div>
> </template>

> Template.d3template.onRendered(function () {
>     d3 append
> });

Js file


> import { Template } from 'meteor/templating';
> import { ReactiveVar } from 'meteor/reactive-var';
> import d3 from 'd3';

> import './main.html';

> Template.body.onRendered(function () {
>     d3.select('#d3-container').append('<h1>hello cat</h1>')
> })


> var w = 960,
> h = 500,
> start = Date.now();

> var rings = [
>     {radius: 65 * 1, width: 16, speed: -3e-2},
>     {radius: 65 * 2, width: 16, speed: -2e-2},
>     {radius: 65 * 3, width: 16, speed: -1e-2},
>     {radius: 65 * 4, width: 16, speed: 1e-2},
>     {radius: 65 * 5, width: 16, speed: 2e-2},
>     {radius: 65 * 6, width: 16, speed: 3e-2}
> ];

> var svg = d3.select("body").append("svg")

> var svg = d3.select("body").append("svg")
>     .attr("width", w)
>     .attr("height", h)
>     .append("g")
>     .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6);

> var ring = svg.selectAll("g")
>         .data(rings)
>         .enter().append("g")
>         .attr("class", "ring")
>         .each(ringEnter);

> d3.timer(function() {
>     var elapsed = Date.now() = start,
>         rotate = function(d) { return "rotate(" + d.speed * elapsed + ")";};

>     ring
>             .attr("transform", rotate)
>             .selectAll("rect")
>                 .attr("transform", rotate);
>     });

> function ringEntrance(d, i) {
>     var n = Math.floor(2 * Math.PI * d.radius / d.width * Math.SQRT1_2),
>         k = 360 / n;

> d3.select(this).selectAll("g")
>     .data(d3.range(n).map(function() { return d;}))
>     .enter().append("g")
>     .attr("class", "square")
>     .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
>   .append("rect")
>     .attr("x", -d.width / 2)
>     .attr("y", -d.width / 2)
>     .attr("width", d.width)
>     .attr("height", d.width);
> }
4

yes

domready = Template.templateName.onRendered(function () {})

bindevent = Template.templateName.events({})

5

My html error are gone

JS

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import d3 from 'd3';

import './main.html';

Template.body.onRendered(function () {})
    d3.select('#d3-container').append('<h1>hello cat</h1>')
});

Template.d3template.onRendered({})
    d3 append('#d3-container').append('<h1>hello cat</h1>')
})

var w = 960,
h = 500,
start = Date.now();

var rings = [
    {radius: 65 * 1, width: 16, speed: -3e-2},
    {radius: 65 * 2, width: 16, speed: -2e-2},
    {radius: 65 * 3, width: 16, speed: -1e-2},
    {radius: 65 * 4, width: 16, speed: 1e-2},
    {radius: 65 * 5, width: 16, speed: 2e-2},
    {radius: 65 * 6, width: 16, speed: 3e-2}
];

var svg = d3.select("body").append("svg")

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6);

var ring = svg.selectAll("g")
        .data(rings)
        .enter().append("g")
        .attr("class", "ring")
        .each(ringEnter);

d3.timer(function() {
    var elapsed = Date.now() = start,
        rotate = function(d) { return "rotate(" + d.speed * elapsed + ")";};

    ring
            .attr("transform", rotate)
            .selectAll("rect")
                .attr("transform", rotate);
    });

function ringEntrance(d, i) {
    var n = Math.floor(2 * Math.PI * d.radius / d.width * Math.SQRT1_2),
        k = 360 / n;

d3.select(this).selectAll("g")
    .data(d3.range(n).map(function() { return d;}))
    .enter().append("g")
    .attr("class", "square")
    .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
  .append("rect")
    .attr("x", -d.width / 2)
    .attr("y", -d.width / 2)
    .attr("width", d.width)
    .attr("height", d.width);
}