带有 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

下面是我的build.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"
)

和 plugins.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);

  }
}

带有 d3 外观的 scalajs 给出错误

scalajs with d3 facade giving errors

d3.js

scala.js