js d3图表已转换为scalajs，无法读取js属性

Question

我正在将以下d3 js转换为scalajs，但出现如下错误。 即使编辑器在EachObject scalajs中找到x变量也无法在js对象中找到x，为什么？我该如何解决此问题，怎么了？ 请帮忙。

  

LineChartObject.scala：64未捕获的TypeError：无法读取属性'x'   未定义       在LineChartObject.scala：64

https://bl.ocks.org/mbostock/3884955

import org.singlespaced.d3js.d3
import scala.scalajs.js.Dynamic._
import scala.math._
import scala.scalajs.js
import scala.scalajs.js.JSConverters._
import org.singlespaced.d3js.Ops._

object LineChartObject {

  def lineChart(): Unit = {
    case class Margin(top: Int, right: Int, bottom: Int, left: Int)
    val margin = Margin(top = 20, right = 20, bottom = 30, left = 50)
    val width = 900 - margin.left - margin.right
    val height = 500 - margin.top - margin.bottom
    val svg = d3.select("#sineGraph").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    val g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    val sineValues = (0.1 to 0.5 by 0.05) map { x => sin(x) }
    val sinebyXValues = (0.01 to 0.5 by 0.01) map { x => sin(1 / x) }
    val map = Map("sinx" -> ((x: Double) => sin(x)), "sin1/x" -> ((x: Double) => sin(1 / x)))
    val jsObj = (map.keys map { k =>
      SineValuesObject(k, ((0.1 to 0.5 by 0.05) map {
        v => {
          if (k == "sinx")
            EachObject(v, sin(v))
          else
            EachObject(v, sin(1 / v))
        }
      }).toJSArray)
    }).toJSArray
    val xValues = d3.extent((0.1 to 0.5 by 0.05).toJSArray)
    val x = d3.scale.linear().domain(js.Array(xValues._1, xValues._2)).range(js.Array(0, width))
    val y = d3.scale.linear().domain(js.Array(sinebyXValues.min, sineValues.max)).range(js.Array(height, 0))
    val xAxis = d3.svg.axis().scale(x).orient("bottom")
    val yAxis = d3.svg.axis().scale(y).orient("left")
    g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height / 2 + ")").call(xAxis)
    g.append("g").attr("class", "axis axis--y").attr("transform", "translate(" + width + ",0)").call(yAxis)
    val lineType = g.selectAll(".lineType").data(jsObj).enter().append("g").attr("class", "lineType")
    val xFn = (d: js.Array[EachObject],i:Int) => {
      global.console.log(d)
      x(d(i).x)
    }
    val yFn = (d: js.Array[EachObject],i:Int) => {
      global.console.log(d)
      y(d(i).y)
    }
    val line = d3.svg.line[js.Array[EachObject]]().x(xFn).y(yFn)
    val lineFn = (d: SineValuesObject) => {
      //val r = d.values map { x => line(x) }
      line(d.values)
    }
    lineType.append("path").attr("class", "line").attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round").attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5).attr("d", lineFn)
  }

  @js.native
  trait SineValuesObject extends js.Object {
    val id: String = js.native
    val values: js.Array[EachObject] = js.native
  }

  object SineValuesObject {
    def apply(id: String, values: js.Array[EachObject]): SineValuesObject = js.Dynamic.literal(id = id, values = values).asInstanceOf[SineValuesObject]
  }

  @js.native
  trait EachObject extends js.Object {
    val x: Double = js.native
    val y: Double = js.native
  }

  object EachObject {
    def apply(x: Double, y: Double): EachObject = js.Dynamic.literal(x = x, y = y).asInstanceOf[EachObject]
  }

}

以下是在控制台日志中以r，，，，，表示的方式，未获取数据。

import org.singlespaced.d3js.d3
import scala.scalajs.js.Dynamic._
import scala.math._
import scala.scalajs.js
import scala.scalajs.js.JSConverters._
import org.singlespaced.d3js.Ops._

object LineChartObject {

  def lineChart(): Unit = {
    case class Margin(top: Int, right: Int, bottom: Int, left: Int)
    val margin = Margin(top = 20, right = 20, bottom = 30, left = 50)
    val width = 900 - margin.left - margin.right
    val height = 500 - margin.top - margin.bottom
    val svg = d3.select("#sineGraph").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    val g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    val sineValues = (0.1 to 0.5 by 0.05) map { x => sin(x) }
    val sinebyXValues = (0.01 to 0.5 by 0.01) map { x => sin(1 / x) }
    val map = Map("sinx" -> ((x: Double) => sin(x)), "sin1/x" -> ((x: Double) => sin(1 / x)))
    val jsObj = (map.keys map { k =>
      SineValuesObject(k, ((0.1 to 0.5 by 0.05) map {
        v => {
          if (k == "sinx")
            EachObject(v, sin(v))
          else
            EachObject(v, sin(1 / v))
        }
      }).toJSArray)
    }).toJSArray
    val xValues = d3.extent((0.1 to 0.5 by 0.05).toJSArray)
    val x = d3.scale.linear().domain(js.Array(xValues._1, xValues._2)).range(js.Array(0, width))
    val y = d3.scale.linear().domain(js.Array(sinebyXValues.min, sineValues.max)).range(js.Array(height, 0))
    val xAxis = d3.svg.axis().scale(x).orient("bottom")
    val yAxis = d3.svg.axis().scale(y).orient("left")
    g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height / 2 + ")").call(xAxis)
    g.append("g").attr("class", "axis axis--y").attr("transform", "translate(" + width + ",0)").call(yAxis)
    val lineType = g.selectAll(".lineType").data(jsObj).enter().append("g").attr("class", "lineType")
    val xFn = (d: EachObject) => {
      global.console.log(d)
      x(d.x)
    }
    val yFn = (d: EachObject) => {
      global.console.log(d)
      y(d.y)
    }
    val line = d3.svg.line().x(xFn).y(yFn)
    val lineFn = (d: SineValuesObject) => {
      global.console.log("lineFn " + d)
      //d.values.foreach(l=>global.console.log("x "+l.x+" y "+l.y))
      val r = d.values map {
        v => {
          global.console.log("v " + v)
          line(v)
        }
      }
      global.console.log("r " + r)
    }
    lineType.append("path").attr("class", "line").attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round").attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5).attr("d", lineFn)
  }

  @js.native
  trait SineValuesObject extends js.Object {
    val id: String = js.native
    val values: js.Array[EachObject] = js.native
  }

  object SineValuesObject {
    def apply(id: String, values: js.Array[EachObject]): SineValuesObject = js.Dynamic.literal(id = id, values = values).asInstanceOf[SineValuesObject]
  }

  @js.native
  trait EachObject extends js.Object {
    val x: Double = js.native
    val y: Double = js.native
  }

  object EachObject {
    def apply(x: Double, y: Double): EachObject = js.Dynamic.literal(x = x, y = y).asInstanceOf[EachObject]
  }

}