1

我正在尝试将数据属性（即 Object.data）传递给用于生成比例的 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])
        )

@xScale(d[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。

Uncaught TypeError: Cannot read property 'length' of undefined

完整的 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")
4

0 回答 0