Question

我正在尝试为d3图形动态生成json数据。我不确定这是否是最佳策略，但我的尝试主要是在脚本标记中包含d3代码，然后通过express中传递的对象生成json。

我遇到的问题是我不确定如何在脚本标记中动态生成json数据。如果有一个更好的代码设计策略，动态生成json对象传递到d3使用jade / pug生成图表，请告诉我。以下代码不起作用。

以下代码：

玉码

 //...content above, d3 to draw the graph below

        svg(height="800", width="1000").graph        
        script.
          var svg = d3.select("svg"),
          var data = #{dataObj}; // <--? how do I pass the json data object passed via route.js within the script tag?

...

route.js

let dataObj = {
  "nodes": [
    {"id": "Fantine", "group": 3},
    {"id": "Blacheville", "group": 3},
    {"id": "Favourite", "group": 3},
    {"id": "test", "group": 3},
    ],
    "links": [
    {"source": "Fantine", "target": "Blacheville", "value": 3},
    {"source": "Fantine", "target": "Favourite", "value": 4},
    {"source": "Fantine", "target": "test", "value": 4},
    ]
  };
    res.render('drawGraph', { dataObj});

控制台

Uncaught SyntaxError: Unexpected identifier
var data = [object Object];

提前感谢您的帮助！

Answer 1

就像@ Stretch0提到的那样，你错过了对象的关键

res.render('drawGraph', { dataObj: dataObj});

但仅此一点不会解决问题。您必须在pug模板中使用JSON.stringify来显示对象

这

 var data = #{dataObj};

到

var data = !{JSON.stringify(dataObj)};

`＃{}转义字符，所以为了避免转义，你可以使用！{}

Answer 2

您正在将对象传递给没有键的对象。

尝试res.render('drawGraph', { dataObj: dataObj});

如何使用jade和express在脚本标记内动态生成javascript

2 个答案: