Question

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

下面转载的代码分为两个逻辑部分。

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

model = ResNet50(include_top=False, weights='imagenet')

top_model = Sequential()
top_model.add(Flatten(input_shape=model.output_shape[1:]))
top_model.add(Dense(256, activation='relu'))
top_model.add(Dropout(0.5))
top_model.add(Dense(1, activation='sigmoid'))
top_model.load_weights(top_model_weights_path)

model = Model(input=model.input, output=top_model(model.output))

第2部分 功能栏（...）使用d3js实际创建条形图。

  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);

现在，当我尝试序列化标记并发送到浏览器时，jsdom中可用的on（＆＃39; mouseover＆＃39;，...）代码不会出现。

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

Answer 1

只需将其加载为字符串：

Square Decomposition

请注意，为了实现这一点，您还需要在html中window.d3.select('body') .append('script') .text("d3.selectAll('rect').on('mouseover', function() { alert(this); });") <script src=。

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

1 个答案: