D3.js 如何将对象级数据传递给d3.scale.linear回调?

D3.js 如何将对象级数据传递给d3.scale.linear回调?,d3.js,D3.js,我正在尝试将一个数据属性,即Object.data传递给用于生成scale的d3回调 renderScatter: () -> $("#render").click => @target.selectAll("svg").selectAll("circle") .data(@data) .enter() .append("circle") .attr("cx", (d) =>

我正在尝试将一个数据属性,即Object.data传递给用于生成scale的d3回调

  renderScatter: () ->
    $("#render").click =>
      @target.selectAll("svg").selectAll("circle")
        .data(@data)
        .enter()
        .append("circle")
        .attr("cx", (d) =>
          @xScale(d[0])
        )
        .attr("cy", (d) -> d[1])
        .attr("r", (d) ->
          Math.sqrt(200 - d[1])
        )
@xScaled[0]引用以下函数

  xScale:
    d3.scale.linear()
      .domain([ 1, d3.max(@data, (d) -> d[1]) ])
      .range([ 0, 200 ])
Object.data指向数组数组,即[[1,2],[3,4]],但当我尝试使用正确设置的缩放信息调用@renderScatter时,我收到一条错误消息,似乎表明xScale内的作用域无法识别@data

未捕获的TypeError:无法读取未定义的属性“length”

下面是完整的Coffeescript类

class ScatterPlot
  constructor: (width, height, target) ->
    @confirmation = ->
      console.log "scatter is working"
    @data= []
    @width = width || "100"
    @height = height || "200"
    @target = d3.select(target)
    @callActions()

  callActions: () ->
    @generateTitle()
    @generateData()
    @drawScatterSvg()
    @renderScatter()
    @renderLabels()

  generateTitle: () ->
    $("#scatterButton").click =>
      @target.append("h5")
        .text($("#scatterName").val())

  generateData: ()->
    $("#generateData").click =>
      if @data.length is 0
        _(10).times =>
          @data.push([Math.round(Math.random() * 325 + 5), Math.round(Math.random()*150 + 20)])
        $("#data").text(@data)

  drawScatterSvg: () ->
    $("#drawSVG").click =>
      console.log @target
      @target.append("svg")
        .attr("width", @width + "px")
        .attr("height", @height + "px")
        .classed("scatter", true)

  renderScatter: () ->
    $("#render").click =>
      @target.selectAll("svg").selectAll("circle")
        .data(@data)
        .enter()
        .append("circle")
        .attr("cx", (d) =>
          @xScale(d[0])
        )
        .attr("cy", (d) -> d[1])
        .attr("r", (d) ->
          Math.sqrt(200 - d[1])
        )

  renderLabels: ->
    $("#labels").click =>
      @target.selectAll("svg").selectAll("text")
        .data(@data)
        .enter()
        .append("text")
        .text( (d) ->
          d[0] + "," + d[1] )
        .attr("x", (d) -> d[0])
        .attr("y", (d) -> d[1])
        .attr("fill", "red")

  xScale:
    d3.scale.linear()
      .domain([ 1, d3.max(@data, (d) -> d[1]) ])
      .range([ 0, 200 ])

plot = new ScatterPlot("500", "200", "#scatter")

那个错误消息到底是从哪里来的?