使用scala.js创建BarChart

问题描述

我正在尝试使用scala-js-d3创建条形图。

问题在于标题中没有标题，只有下划线可见。酒吧根本没有文字。

BarChart已呈现，并且在开发人员工具的控制台中没有问题。

以下是所用代码的示例：

val graphHeight = 450

    //The width of each bar.
    val barWidth = 80

    //The distance between each bar.
    val barSeparation = 10


    //The actual horizontal distance from drawing one bar rectangle to drawing the next.
    val horizontalBardistance = barWidth + barSeparation

    //The value to multiply each bar's value by to get its height.
    val barHeightMultiplier = graphHeight / maxData;

    //Color for start
    val color = d3.rgb("DarkSlateBlue")

    //val my_data = js.Array(8,22,31,36,48,17,25)

    val rectXFun = (d: Int,i: Int) => i * horizontalBardistance
    val rectYFun = (d: Int) => graphHeight - d * barHeightMultiplier

    val rectXFun2 = (d: Int,i: Int) => i * horizontalBardistance +5
    val rectYFun2 = (d: Int) => graphHeight - d * barHeightMultiplier +15
    val rectHeightFun = (d: Int) => d * barHeightMultiplier
    val rectColorFun = (d: Int,i: Int) => color.brighter(i * 0.5).toString
    val remove_element = d3.select("#"+currContainer).select("svg").remove()
    val svg = d3.select("#"+currContainer).append("svg").attr("width","100%").attr("height","450px")
    val sel = svg.selectAll("rect").data(my_data)
    val data_enter = sel.enter()
    val sel2 = data_enter
      .append("rect")
      .attr("x",rectXFun)
      .attr("y",rectYFun)
      .attr("width",barWidth)
      .attr("height",rectHeightFun)
      .style("fill",rectColorFun)
    //.style("fill","black")

      val textxOffset = horizontalBardistance / 2 - 12
      val textYOffset = 20
      val textYPosition = graphHeight + textYOffset;

      //Draw the text.
      data_enter.append("text").text((d: Int) => d.toString)
      .attr("x",(d: Int,i: Int) => i * horizontalBardistance + textxOffset)
      .attr("y",textYPosition)
      .style("text-decoration","underline")
      .style("fill","black")
      .style("font-size","16px")

      svg.append("text")
      //.attr("x",(width / 2))
      //.attr("y",0 - (margin.top / 2))
      .text("Graph Title")
      .attr("text-anchor","middle")
      .style("font-size","16px")
      .style("text-decoration","blue")
      .style("color","blue")

解决方法

我必须为示例创建轴。