d3js服务器端渲染如何插入脚本以供客户端执行答案

【问题标题】：d3js server side rendering how to insert a script for client executiond3js服务器端渲染如何插入脚本以供客户端执行
【发布时间】：2016-11-24 13:58:48
【问题描述】：

我正在探索使用 nodeJS、express-js 和 jsdom 在服务器端创建 d3js svg。我能够创建将正确显示在浏览器上的 svg 图表。现在，我想在图形中添加一些事件交互代码，这些代码应该在客户端（浏览器）上执行。如果我在 jsdom.env(...) 中添加事件代码，它将仅在 jsdom 中有效。但是当我将最终标记发送到浏览器时，此事件代码不可用。如何解决这个问题？

我在下面复制的代码分为两个逻辑部分。

第 1 部分： ExpressJS 处理处理传入请求的代码，通过从文件系统加载 html，并具有必要的胶水代码来构建 jsdom 环境。

  8 var w = 500, h=200;
  9 app.get('/env', function(req, res) {
 10   jsdom.env({
 11     file: './hello.html',
 12     src: foo,
 13     done: function(err, window) {
 14       var $ = window.$;
 15       window.d3 = d3.select(window.document);
 16       var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 17                 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
 18 
 19       var svg = window.d3.select('body')
 20         .append('svg')
 21         .attr('width', w)
 22         .attr('height', h);
 23       bar(svg, dataset);
 24       res.end(window.document.documentElement.outerHTML);
 25     }
 26   });
 27 });
 28 
 29 app.listen(3111);

第 2 部分 使用 d3js 实际创建条形图的函数 bar(...)。

54 function bar(svg, data) {
55   var barPadding =1;
56   svg.selectAll("rect")
57       .data(data)
58       .enter()
59       .append("rect")
60       .attr('height', function(d){
61           var barHeight = d*4 + "px";
62           return barHeight;
63        })
64       .attr('width', w/data.length - barPadding)
65       .attr('x', function(d,i) { return i* w/data.length; })
66       .attr('y', function(d) { return h-d*4; })
67       .attr('fill', function(d) { return "rgb(0,0," + (d*10) + ")"; })
68       .on('mouseover', function() {
69         d3.select(this)
70           alert('this:'+ this);
71       }); 
72 
      ...
95    return svg;
96 }

现在，当我尝试序列化标记并发送到浏览器时，jsdom 中可用的 on('mouseover', ...) 代码不会出现。

有没有办法，我可以将此脚本插入 svg 并在浏览器中用于客户端执行？

【问题讨论】：

标签： javascript html node.js d3.js svg

【解决方案1】：

只需将其作为字符串加载：

window.d3.select('body')
  .append('script')
  .text("d3.selectAll('rect').on('mouseover', function() { alert(this); });")

请注意，要使其正常工作，您还需要在 html 中添加 <script src= d3。

【讨论】：