node實現D3數據交互與使用

treemap.js

        <script src="d3/d3.min.js"></script>
        <script>
            $(function() {
                var svg = d3.select("svg"),
                    width = +svg.attr("width"),
                    height = +svg.attr("height");

                var fader = function(color) {
                        return d3.interpolateRgb(color, "#fff")(0.2);
                    },
                    color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
                    format = d3.format(",d");

                var treemap = d3.treemap()
                    .tile(d3.treemapResquarify)
                    .size([width, height])
                    .round(true)
                    .paddingInner(1);
                var url = "http://localhost:8282/treemap";
                d3.json(url, function(error, data) {
                    if(error) throw error;

                    var root = d3.hierarchy(data)
                        .eachBefore(function(d) {
                            d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name;
                        })
                        .sum(sumBySize)
                        .sort(function(a, b) {
                            return b.height - a.height || b.value - a.value;
                        });

                    treemap(root);

                    var cell = svg.selectAll("g")
                        .data(root.leaves())
                        .enter().append("g")
                        .attr("transform", function(d) {
                            return "translate(" + d.x0 + "," + d.y0 + ")";
                        });

                    cell.append("rect")
                        .attr("id", function(d) {
                            return d.data.id;
                        })
                        .attr("width", function(d) {
                            return d.x1 - d.x0;
                        })
                        .attr("height", function(d) {
                            return d.y1 - d.y0;
                        })
                        .attr("fill", function(d) {
                            return color(d.parent.data.id);
                        });

                    cell.append("clipPath")
                        .attr("id", function(d) {
                            return "clip-" + d.data.id;
                        })
                        .append("use")
                        .attr("xlink:href", function(d) {
                            return "#" + d.data.id;
                        });

                    cell.append("text")
                        .attr("clip-path", function(d) {
                            return "url(#clip-" + d.data.id + ")";
                        })
                        .selectAll("tspan")
                        .data(function(d) {
                            return d.data.name.split(/(?=[A-Z][^A-Z])/g);
                        })
                        .enter().append("tspan")
                        .attr("x", 4)
                        .attr("y", function(d, i) {
                            return 13 + i * 10;
                        })
                        .text(function(d) {
                            return d;
                        });

                    cell.append("title")
                        .text(function(d) {
                            return d.data.id + "\n" + format(d.value);
                        });

                    d3.selectAll("input")
                        .data([sumBySize, sumByCount], function(d) {
                            return d ? d.name : this.value;
                        })
                        .on("change", changed);

                    var timeout = d3.timeout(function() {
                        d3.select("input[value=\"sumByCount\"]")
                            .property("checked", true)
                            .dispatch("change");
                    }, 2000);

                    function changed(sum) {
                        timeout.stop();

                        treemap(root.sum(sum));

                        cell.transition()
                            .duration(750)
                            .attr("transform", function(d) {
                                return "translate(" + d.x0 + "," + d.y0 + ")";
                            })
                            .select("rect")
                            .attr("width", function(d) {
                                return d.x1 - d.x0;
                            })
                            .attr("height", function(d) {
                                return d.y1 - d.y0;
                            });
                    }
                });

                function sumByCount(d) {
                    return d.children ? 0 : 1;
                }

                function sumBySize(d) {
                    return d.size;
                }

            });
        </script>

demo2.js

   <script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(40,0)");

var tree = d3.cluster()
    .size([height, width - 160]);

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var url="http://localhost:8282/demo2";
d3.csv(url, function(error, data) {
  if (error) throw error;
   console.log(data);
  var root = stratify(data)
      .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });

  tree(root);

  var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

  var node = g.selectAll(".node")
      .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 2.5);

  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});

</script>

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser'); 

var Treemap = require('./routes/Treemap');
var demo2 = require('./routes/demo2');
var demo3 = require('./routes/demo3');


var ejs=require('ejs');
var app = express();
//本地請求跨域
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
// view engine setup
app.engine("html",ejs.__express);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//app.use('/', index);
//app.use('/users', users);
app.use('/treemap',Treemap);
app.use('/demo2',demo2);
app.use('/demo3',demo3);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

treemap.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
res.send(你要傳的數據);
});

module.exports = router;

democsv.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    var  fs = require("fs");  
    fs.readFile('../node/flare.csv', function(err, data) {

        if(err) {
            console.log(err.stack);
            return;
        } else {
            var newdata = data.toString();
            console.log(newdata);
            res.send(newdata);
        }

    });
});

module.exports = router;