如何在Node环境下调用MongoDB数据用于D3可视化开发

你现有接口的查询结果处理逻辑补充如下，直接返回JSON格式的徒步记录数组即可：

app.get('/:id', (req, res) => {
  const id = req.params.id;

  Hiker.findById(id)
  .then(result => {
    if (!result) {
      return res.status(404).json({msg: '未找到对应用户'})
    }
    // 直接返回用户的徒步记录数组
    res.json(result.log)
  })
  .catch(err => {
    console.log(err);
    res.status(500).json({msg: '服务器查询错误'})
  })
})

根据你项目的渲染模式，可选两种常用方案：

方案1：服务端模板注入（适用于SSR场景，比如用EJS/Pug等模板引擎） #

1. 后端渲染页面时将查询到的徒步数据注入到页面全局变量：

// 接口调整为渲染页面，返回HTML
app.get('/:id', (req, res) => {
  const id = req.params.id;
  Hiker.findById(id)
  .then(result => {
    if (!result) return res.status(404).send('用户不存在')
    // 把log数组传给模板
    res.render('你的页面模板文件名', { hikeLog: result.log })
  })
})

2. 在页面模板中，在加载D3独立JS文件之前，注入全局变量：

<script>
// 把后端传入的数组序列化后挂载到window全局
window.hikeData = <%- JSON.stringify(hikeLog) %>
</script>
<!-- 后加载D3的独立JS文件 -->
<script src="你的D3图表文件路径.js"></script>

3. 在独立的D3 JS文件中直接使用window.hikeData作为数据源，调用你的渲染逻辑即可，和你之前在CodePen中拿到Google Sheets数据后的处理逻辑一致。

方案2：前端主动请求（适用于前后端分离场景） #

直接在独立的D3 JS文件中发送请求拿数据，拿到后执行渲染逻辑即可：

// D3独立文件内的代码
function renderChart(data) {
  // 把你之前写的D3渲染逻辑放到这个函数里
}

// 页面加载完成后请求数据
fetch('/替换为对应用户的ID')
  .then(res => res.json())
  .then(data => {
    // 拿到数据后调用渲染函数
    renderChart(data)
  })
  .catch(err => console.log('数据请求失败：', err))

• 数据类型不匹配：Schema中定义的数字类型字段如果被错误序列化为字符串，会导致D3比例尺、数值计算异常，渲染前可加一层类型校验，必要时用Number()强制转换数值字段。
• 空数据异常：如果用户没有徒步记录，返回的数组为空，直接传入D3会触发选择器、坐标轴计算等报错，渲染前要先判断数组长度，为空时展示兜底提示即可。
• 日期解析失败：你Schema中的hike_date为字符串类型，D3做时间维度的图表时需要转换为Date对象，要确认你的日期字符串格式可被new Date()正常解析，异常格式需自定义转换逻辑。
• 脚本加载顺序错误：如果用全局变量注入的方案，必须保证注入全局数据的script标签在D3文件的script标签之前加载，否则D3文件读取不到全局变量会报错。
• 跨域拦截：如果前端页面和后端接口的域名、端口不一致，需要在Express端配置CORS允许跨域请求，否则fetch会被浏览器拦截。

内容的提问来源于stack exchange，提问作者Alpine_Shell