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中也是如此。