D3.js 可视化与 node.js [关闭]答案

【问题标题】：D3.js visualization with node.js [closed]D3.js 可视化与 node.js [关闭]
【发布时间】：2013-09-07 13:24:23
【问题描述】：

我刚开始学习 node.js，我想学习如何使用 node 创建 D3.js 视觉效果。谁能解释我如何才能做到这一点？理想情况下，我正在寻找一个尽可能简单的示例，以便我可以阅读代码并了解如何执行此操作。我看了一些长度，但我没有找到任何可重复的例子。

【问题讨论】：

This question 可能会有所帮助。

标签： node.js d3.js

【解决方案1】：

你想做什么？ Node.js 没有任何图形界面或 DOM。

您可以在节点中使用a headless browser，但您仍然需要真正的浏览器来呈现结果。

评论后编辑：

如果您想要一个节点应用来提供数据，请尝试express framework。

简单的快递服务器：

var express = require('express');
var app = express();

app.get('/circle', function(req, res){
  // CSP headers
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Headers", "X-Requested-With");
  // response
  res.send({ x: 12, y: 34, r: 5 });
});

app.listen(3000);

使用 Ajax 请求获取值。可能您想在响应中设置CSP headers 以允许跨域请求。

使用 jQuery 的客户端：

$.get('http://yourserver.com:3000/circle', function(data) {
  alert(data);
  // set here your svg properties
});

【讨论】：

谢谢。我只是在寻找一个示例，说明如何使用节点将数据推送到 D3 可视化中。
所以你只想要一个节点应用来提供数据？
这太棒了！我还想了解一件事。如果我想用 d3 制作一个 svg 圆并将 x、y 和半径数据传递给浏览器以生成圆，我该怎么做？ <svg width="50" height="50"> 2 <circle cx="25" cy="25" r="25" fill="purple" /> </svg>
好的，我已经更新了回复。但我觉得你的问题与node或D3无关。您首先需要基本的 HTTP 和 javascript 知识。
再次感谢您的帮助。是的，我通常不做这种事情，所以我的知识缺乏。我的服务器使用node myapp.js 运行，我在/circle 看到数据。什么是 jQuery 位。这是一个单独的文件吗？我没有看到任何警报。对不起，我缺乏知识。