使用 D3.js selection.data 来自 Scala.js
Using D3.js selection.data from Scala.js
我是 D3.js 和 Scala 的新手。我正在尝试将 Scala.js facade 用于 D3.js 并且我想构建 HTML table,如示例 here.
所示
部分任务是将指定的数据数组与当前选择相结合。数组是二维的 scala.scalajs.js.Array
。 Scala.js API 有以下内容:
def data(): js.Array[Datum] = js.native
def data[NewDatum](data: js.Array[NewDatum]): Update[NewDatum] = js.native
def data[NewDatum](data: js.Array[NewDatum], key: js.ThisFunction2[Datum|NewDatum,js.UndefOr[NewDatum], Int, String]): Update[NewDatum] = js.native
def data[NewDatum <: Datum](data: js.Array[NewDatum], key: js.Function2[Datum, Int, String]): Update[NewDatum] = js.native
def data[NewDatum](data: DatumFunction[js.Array[NewDatum]], key: js.ThisFunction2[Datum|NewDatum,js.UndefOr[NewDatum], Int, String]): Update[NewDatum] = js.native
AFAIK,我应该使用数据为 DatumFunction
的最后一种方法,但我坚持:
val cells = rows.selectAll("td")
.data((selData: js.Array[String], i: Int, j: Int) => js.Array("1","2","3"), (d: String, i: Int) => d + "_" + i)
...
但是这段代码无法编译。如何解决?
更新:
有一个编译器输出:
[error] Table.scala:56: overloaded method value data with alternatives:
[error] [NewDatum](data: scala.scalajs.js.Function3[SelData,Int,Int,scala.scalajs.js.Array[NewDatum]], key: scala.scalajs.js.ThisFunction2[scala.scalajs.js.|[SelData,NewDatum],scala.scalajs.js.UndefOr[NewDatum],Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum <: SelData](data: scala.scalajs.js.Array[NewDatum], key: scala.scalajs.js.Function2[SelData,Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum](data: scala.scalajs.js.Array[NewDatum], key: scala.scalajs.js.ThisFunction2[scala.scalajs.js.|[SelData,NewDatum],scala.scalajs.js.UndefOr[NewDatum],Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum](data: scala.scalajs.js.Array[NewDatum])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] ()scala.scalajs.js.Array[SelData]
[error] cannot be applied to ((scala.scalajs.js.Array[String], Int, Int) => scala.scalajs.js.Array[String], (String, Int) => String)
[error] .data((selData: js.Array[String], i: Int, j: Int) => js.Array("1","2","3"), (d: String, i: Int) => d + "_" + i)
[error] ^
[error] one error found
[error] (compile:compileIncremental) Compilation failed
更新 2:
我修改了代码:
val cells = rows.selectAll("td")
.data((d: js.Array[js.Array[String]]) => js.Array("1","2","3"), (x: Any, y: js.UndefOr[String], z: Int) => "test")
并且编译成功,但现在我的控制台出现 JS 错误:
Uncaught scala.scalajs.runtime.UndefinedBehaviorError: An undefined behavior was detected: undefined is not an instance of java.lang.Integer
$throwClassCastException @ scalajsenv.js:192
$asInt @ scalajsenv.js:620
$uI @ scalajsenv.js:651
(anonymous function) @ Ops.scala:45
Aa.data @ scala-js-tutorial-jsdeps.js:9209
$c_Ltutorial_webapp_Table$.drawTable__Lorg_singlespaced_d3js_Transition @ Ops.scala:45
$c_Ltutorial_webapp_Table$.main__V @ Table.scala:18
$c_Ltutorial_webapp_Table$.$$js$exported$meth$main__O @ JSApp.scala:18
$c_Ltutorial_webapp_Table$.main @ Table.scala:10
(anonymous function) @ scalajs-tutorial-fastopt.html:24
我用了scala-js-d3。实际上,这是版本 0.3.0 的问题。
作者解决了一个 issue in version 0.3.1 and gave an example 的工作解决方案:
package example
import org.singlespaced.d3js.Ops._
import org.singlespaced.d3js.d3
import scala.scalajs.js
object ScalaJSExample extends js.JSApp {
def main(): Unit = {
/**
* Adapted from https://github.com/mbostock/d3/wiki/Selections#data
*/
val matrix = js.Array(
js.Array(11975, 5871, 8916, 2868),
js.Array( 1951, 10048, 2060, 6171),
js.Array( 8010, 16145, 8090, 8045),
js.Array( 1013, 990, 940, 6907)
)
val tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr")
println("hihi")
val td = tr.selectAll("td")
.data( (d:js.Array[Int]) => { println(d); d; } )
.enter().append("td")
.text( (d:Int) => d.toString)
}
}
我是 D3.js 和 Scala 的新手。我正在尝试将 Scala.js facade 用于 D3.js 并且我想构建 HTML table,如示例 here.
所示部分任务是将指定的数据数组与当前选择相结合。数组是二维的 scala.scalajs.js.Array
。 Scala.js API 有以下内容:
def data(): js.Array[Datum] = js.native
def data[NewDatum](data: js.Array[NewDatum]): Update[NewDatum] = js.native
def data[NewDatum](data: js.Array[NewDatum], key: js.ThisFunction2[Datum|NewDatum,js.UndefOr[NewDatum], Int, String]): Update[NewDatum] = js.native
def data[NewDatum <: Datum](data: js.Array[NewDatum], key: js.Function2[Datum, Int, String]): Update[NewDatum] = js.native
def data[NewDatum](data: DatumFunction[js.Array[NewDatum]], key: js.ThisFunction2[Datum|NewDatum,js.UndefOr[NewDatum], Int, String]): Update[NewDatum] = js.native
AFAIK,我应该使用数据为 DatumFunction
的最后一种方法,但我坚持:
val cells = rows.selectAll("td")
.data((selData: js.Array[String], i: Int, j: Int) => js.Array("1","2","3"), (d: String, i: Int) => d + "_" + i)
...
但是这段代码无法编译。如何解决?
更新:
有一个编译器输出:
[error] Table.scala:56: overloaded method value data with alternatives:
[error] [NewDatum](data: scala.scalajs.js.Function3[SelData,Int,Int,scala.scalajs.js.Array[NewDatum]], key: scala.scalajs.js.ThisFunction2[scala.scalajs.js.|[SelData,NewDatum],scala.scalajs.js.UndefOr[NewDatum],Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum <: SelData](data: scala.scalajs.js.Array[NewDatum], key: scala.scalajs.js.Function2[SelData,Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum](data: scala.scalajs.js.Array[NewDatum], key: scala.scalajs.js.ThisFunction2[scala.scalajs.js.|[SelData,NewDatum],scala.scalajs.js.UndefOr[NewDatum],Int,String])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] [NewDatum](data: scala.scalajs.js.Array[NewDatum])org.singlespaced.d3js.selection.Update[NewDatum] <and>
[error] ()scala.scalajs.js.Array[SelData]
[error] cannot be applied to ((scala.scalajs.js.Array[String], Int, Int) => scala.scalajs.js.Array[String], (String, Int) => String)
[error] .data((selData: js.Array[String], i: Int, j: Int) => js.Array("1","2","3"), (d: String, i: Int) => d + "_" + i)
[error] ^
[error] one error found
[error] (compile:compileIncremental) Compilation failed
更新 2:
我修改了代码:
val cells = rows.selectAll("td")
.data((d: js.Array[js.Array[String]]) => js.Array("1","2","3"), (x: Any, y: js.UndefOr[String], z: Int) => "test")
并且编译成功,但现在我的控制台出现 JS 错误:
Uncaught scala.scalajs.runtime.UndefinedBehaviorError: An undefined behavior was detected: undefined is not an instance of java.lang.Integer
$throwClassCastException @ scalajsenv.js:192
$asInt @ scalajsenv.js:620
$uI @ scalajsenv.js:651
(anonymous function) @ Ops.scala:45
Aa.data @ scala-js-tutorial-jsdeps.js:9209
$c_Ltutorial_webapp_Table$.drawTable__Lorg_singlespaced_d3js_Transition @ Ops.scala:45
$c_Ltutorial_webapp_Table$.main__V @ Table.scala:18
$c_Ltutorial_webapp_Table$.$$js$exported$meth$main__O @ JSApp.scala:18
$c_Ltutorial_webapp_Table$.main @ Table.scala:10
(anonymous function) @ scalajs-tutorial-fastopt.html:24
我用了scala-js-d3。实际上,这是版本 0.3.0 的问题。
作者解决了一个 issue in version 0.3.1 and gave an example 的工作解决方案:
package example
import org.singlespaced.d3js.Ops._
import org.singlespaced.d3js.d3
import scala.scalajs.js
object ScalaJSExample extends js.JSApp {
def main(): Unit = {
/**
* Adapted from https://github.com/mbostock/d3/wiki/Selections#data
*/
val matrix = js.Array(
js.Array(11975, 5871, 8916, 2868),
js.Array( 1951, 10048, 2060, 6171),
js.Array( 8010, 16145, 8090, 8045),
js.Array( 1013, 990, 940, 6907)
)
val tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr")
println("hihi")
val td = tr.selectAll("td")
.data( (d:js.Array[Int]) => { println(d); d; } )
.enter().append("td")
.text( (d:Int) => d.toString)
}
}