Adding text to the Bar charts example about scala-js-d3

[aglenis]

I also tried a simpler example from here:
http://thecodingtutorials.blogspot.com/2012/07/introduction-to-d3.html

val graphHeight = 450

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

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

      //The maximum value of the data.
      val maxData = 50

      //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("#d3Container2").select("svg").remove()
      val svg = d3.select("#d3Container2").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)

        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);

And it still does not work.
Can you please help me?

[aglenis]

I also tried adding a title to the graph using:

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", "underline")
        .style("fill","blue")
        .style("color","blue")

But only the underline gets shown.

[aglenis]

I had to create the x and y axis for the code to work.