Question

我在CoffeeScript中有一个函数可以根据传入的数据更新折线图：

update_graph = (response_array) ->
  labels = window.legendLabels
  margin =
    top: 35
    right: 20
    bottom: 20
    left: 40

  width = $('#response_container').width() - margin.left - margin.right
  height = 350 - margin.top - margin.bottom

  svg = d3.select(".d3-graph svg")


  lines = color.domain().map((name) ->
    name: name
    values: response_array.filter((response) -> labels[response.index] == name).map((d) ->
      value: d.value
      created_at: formatDate(d.created_at)
    )
  )

  x = d3.time.scale().domain(d3.extent(response_array, (d) -> new Date(formatDate(d.created_at)))).range([0, width])
  y = d3.scale.linear().domain([-5, 5]).range([height, 0])

  xAxis = d3.svg.axis().scale(x).orient("bottom")
  svg.selectAll("g.x.axis").call(xAxis)

似乎正好在我打电话的地方

  xAxis = d3.svg.axis().scale(x).orient("bottom")
  svg.selectAll("g.x.axis").call(xAxis)

我的JS控制台有时会出现以下错误：

Invalid value for <g> attribute transform="translate(NaN,0)"

如果extent中有一个元素，但我没有尝试设置d。有没有人见过这个并修好过来？

Answer 1

我想我想出来了。我相信当x轴域未设置（或者设置为NaN值）时，问题是尝试基于新值设置/更新x轴。因此，在图表更新之前将x轴域设置为默认值似乎已经修复了它。类似的东西：

if response_array.length > 0
  x = d3.time.scale().domain(d3.extent(response_array, (d) -> new Date(formatDate(d.created_at)))).range([0, width])
else
  dateNow = new Date()
  date30MinutesFromNow = new Date().getTime() + (10 * 60000)
  x = d3.time.scale().domain([dateNow, date30MinutesFromNow]).range([0, width])

D3更新x轴刻度抛出错误＆＃34;翻译（NaN，0）＆＃34;

1 个答案: