Question

使用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)

有什么遗失的吗？：\

Answer 1

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

您正在使用jsdom将某些html作为字符串加载，并尝试将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))

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

1 个答案: