带有 D3 外观的 Scalajs 给出错误

Question

我正在scalajs中处理此示例，但在

val mm: js.Function2[Bin[Double], Double, Double] = { (x: Bin[Double], y: Double) => x.y }
val yMax = d3.max(data, mm)

D3.max 确实只有方法js.Function2[Bin[Double],Int,Double]，但没有js.Function2[Bin[Double],Double,Double]。

val s = (d: Bin[Double]) => "translate(" + x(d.x) + "," + y(d.y) + ")"
val bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", s)

attr("transform",s)给出错误找不到重载的方法。

我的项目有什么问题。

https://github.com/spaced/scala-js-d3-example-app/blob/histogram/src/main/scala/example/ScalaJSExample.scala

下面是我的构建.sbt

import _root_.org.scalajs.sbtplugin.ScalaJSPlugin.autoImport._
resolvers += "repository" at "http://central.maven.org/maven2/"
resolvers += "Artima Maven Repository" at "http://repo.artima.com/releases"
resolvers +=
"Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots"
resolvers += Resolver.jcenterRepo
lazy val server = (project in file("server")).settings(commonSettings).settings(
scalaJSProjects := Seq(client),
pipelineStages in Assets := Seq(scalaJSPipeline),
pipelineStages := Seq(digest, gzip),
// triggers scalaJSPipeline when using compile or continuous compilation
compile in Compile := ((compile in Compile) dependsOn scalaJSPipeline).value,
libraryDependencies ++= Seq(
"com.vmunier" %% "scalajs-scripts" % "1.1.2",
guice,
specs2 % Test
),
// Compile the project before generating Eclipse files, so that generated .scala or .class files for views and routes are present
EclipseKeys.preTasks := Seq(compile in Compile)
).enablePlugins(PlayScala).
dependsOn(sharedJvm)
lazy val client = (project in file("client")).settings(commonSettings).settings(
scalaJSUseMainModuleInitializer := true,
libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.1"
), skip in packageJSDependencies := false,
jsDependencies += "org.webjars" % "jquery" % "2.2.1" / "jquery.js" minified "jquery.min.js",
jsDependencies += "org.webjars" % "d3js" % "3.5.17" / "3.5.17/d3.min.js",
libraryDependencies += "org.querki" %%% "jquery-facade" % "1.2",
libraryDependencies += "org.singlespaced" %%% "scalajs-d3" % "0.3.4",
jsEnv := new org.scalajs.jsenv.jsdomnodejs.JSDOMNodeJSEnv()
).enablePlugins(ScalaJSPlugin, ScalaJSWeb).dependsOn(sharedJs)
lazy val shared = _root_.sbtcrossproject.CrossPlugin.autoImport.crossProject(JSPlatform, JVMPlatform)
.crossType(_root_.sbtcrossproject.CrossPlugin.autoImport.CrossType.Pure)
.in(file("shared"))
.settings(commonSettings)
lazy val sharedJvm = shared.jvm
lazy val sharedJs = shared.js
lazy val commonSettings = Seq(
scalaVersion := "2.12.5",
organization := "com.algorithms"
)

和项目中的插件.sbt。

// Comment to get more information during initialization
logLevel := Level.Warn
// Resolvers
resolvers += "Typesafe repository" at "https://repo.typesafe.com/typesafe/releases/"
// Sbt plugins
// Use Scala.js 1.x
//addSbtPlugin("com.vmunier"               % "sbt-web-scalajs"           % "1.0.8")
//addSbtPlugin("org.scala-js"              % "sbt-scalajs"               % "1.0.0-M3")
// If you prefer using Scala.js 0.6.x, uncomment the following plugins instead:
addSbtPlugin("com.vmunier"               % "sbt-web-scalajs"           % "1.0.8-0.6")
addSbtPlugin("org.scala-js"              % "sbt-scalajs"               % "0.6.23")
addSbtPlugin("com.typesafe.play"         % "sbt-plugin"                % "2.6.15")
addSbtPlugin("org.portable-scala"        % "sbt-scalajs-crossproject"  % "0.5.0")
addSbtPlugin("com.typesafe.sbt"          % "sbt-gzip"                  % "1.0.2")
addSbtPlugin("com.typesafe.sbt"          % "sbt-digest"                % "1.1.4")
addSbtPlugin("com.typesafe.sbteclipse"   % "sbteclipse-plugin"         % "5.2.4")

Answer 1

以下内容解决了我的问题。

import org.querki.jquery._
import org.singlespaced.d3js.Ops._
import org.singlespaced.d3js.d3
import org.singlespaced.d3js.histogramModule.Bin
import scala.scalajs.js
object ScalaJSExample {
def main(args: Array[String]): Unit = {
//dom.document.getElementById("scalajsShoutOut").textContent = SharedMessages.itWorks
//setupUI()
bates()
}
def setupUI(): Unit = {
//$("head").append("<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-inline'; media-src *; img-src * " />");
$("body").append("<svg></svg>")
}
def bates(): Unit = {
val bates = d3.random.bates(20)
val values: js.Array[Double] = d3.range((1000)).map(_ => bates.apply())
val formatCount = d3.format(",.0f")
case class Margin(top: Int, right: Int, bottom: Int, left: Int)
val margin = Margin(top = 10, right = 30, bottom = 30, left = 30)
val width = 960 - margin.left - margin.right
val height = 500 - margin.top - margin.bottom
val x = d3.scale.linear().domain(js.Array(0, 1)).range(js.Array(0, width))
val data = d3.layout.histogram().bins((x.ticks(20)))(values)
val mm: js.Function2[Bin[Double], Int, Double] = { (x: Bin[Double], y: Int) => x.y }
val yMax = d3.max(data, mm)
val y = d3.scale.linear().domain(js.Array(0, yMax)).range(js.Array(height, 0))
val xAxis = d3.svg.axis().scale(x).orient("bottom")
val svg = d3.select("body").append("svg").attr("width", width - margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g")
val s = (d: Bin[Double]) => "translate(" + x(d.x) + "," + y(d.y) + ")"
val bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", (d:Bin[Double]) => "translate(" + x(d.x) + "," + y(d.y) + ")" )
bar.append("rect")
.attr("x", 1)
.attr("width", x(data(0).dx) - 1)
.attr("height", (d:Bin[Double]) => height - y(d.y))
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data(0).dx) / 2)
.attr("text-anchor", "middle")
.text((d:Bin[Double]) => formatCount(d.y))
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
}
}