在 node.js 中运行 D3，我错过了什么？答案

【问题标题】：Running D3 in node.js, what am I missing?在 node.js 中运行 D3，我错过了什么？
【发布时间】：2013-12-23 01:26:27
【问题描述】：

使用d3.select('#chart') 选择一个项目不起作用，即使我创建了全局窗口和文档。

使用document.querySelector('#chart') 手动选择它似乎可以以某种方式工作。

jsdom = require('jsdom').jsdom
document = jsdom('<html><head></head><body><div id="chart"></div></body></html>')
window = document.parentWindow

d3 = require('d3')
data = [4, 8, 15, 16, 23, 42]

x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 420])

//works
chartDiv = document.querySelector('#chart')
d3.select(chartDiv).selectAll("div").data(data).enter().append("div").style("width",(d) -> x(d) + "px").text((d) -> d)

//doesn't work
d3.select('#chart').selectAll("div").data(data).enter().append("div").style("width",(d) -> x(d) + "px").text((d) -> d)

有什么遗漏吗？ :\

【问题讨论】：

您收到的错误信息是什么？
当你去寻找 <div id="chart"> 时，它在 DOM 中吗？
您在 DOM 中是否有多个带有 id="chart" 的 div？（并不是说这可以完全解释这种差异，但这是一个奇怪的错误）。
移动 require 是否解决了您的问题？
d3 捕获了它自己对document 的引用，如source code 的第11 行所示。据我了解（之前没有尝试过 JSDOM）这是一个问题，因为这个捕获的引用并不指向你的 jsdom 创建的document。你看到this thread了吗？ TLDR，但似乎正在讨论您的问题。我还希望将document 设为全局，例如global.document = jsdom('...') 可能是一种解决方法，但该线程并未声称如此。

标签： node.js d3.js coffeescript

【解决方案1】：

d3.select('#chart') 在您的情况下不起作用似乎是合乎逻辑的，因为您要针对的 div 不在当前页面上。

您正在使用 jsdom 将一些 html 作为字符串加载，并尝试替换 window 变量以指向这个新页面。

但更改范围内的 window 变量不会影响 d3 内部选择器。这就是为什么你用document.querySelector('#chart')而不是直接d3.select('#chart')来选择你的div

如this post 中所引用，您可以在主体上进行选择，然后使用子选择：

{jsdom} = require('jsdom')
d3 = require('d3')

# make a d3 selection on the new page body
document = d3.select(jsdom("""<html>
    <body>
      <div id="chart"></div>
    </body>
  </html>""").body)

data = [4, 8, 15, 16, 23, 42]

x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 420])

# make a subselection within the body
d3.select('#chart')
  .selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("width",(d) -> x(d) + "px")
  .text((d) -> d))

【讨论】：