d3js服务器端渲染如何为客户端执行插入脚本

Question

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

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

第1部分： ExpressJS处理，从文件系统处理传入的请求，通过加载HTML，并且具有必要的粘合代码来构建jsdom ENV代码。

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实际创建一个条形图的功能栏（...）。

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可用的代码，就不会出现，当我试图序列标记和发送到浏览器。

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

Answer 1

就在加载它作为一个字符串：

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

注意，对于工作你需要<script src=d3在HTML中也是如此。