These are chat archives for japgolly/scalajs-react

2nd
Feb 2016
Rodrigo Martinez Jacobson
@Rodrigo-Martinez-Jacobson
Feb 02 2016 10:10
Hello! I'm having some problems using scala-js-d3 with scalajs-react. I'm trying to create a simple chart inside a component, but it only shows when it's attached to body and then it appears in all the pages :S
This is my code right now:
  val svg: Selection[EventTarget] = d3.select("body").append("svg").attr("width", "100%").attr("height", "450px")
  val sel: Update[Int] = svg.selectAll("rect").data(js.Array(8, 22, 31, 36, 48, 17, 25))


  val D3Chart = ReactComponentB[D3ChartProps]("D3Chart")
    .render(p => <.h2("Chart"))
    .domType[HTMLCanvasElement]
    .componentDidMount(scope => Callback {
      sel.enter()
        .append("rect")
        .attr("x", rectXFun)
        .attr("y", rectYFun)
        .attr("width", barWidth)
        .attr("height", rectHeightFun)
        .style("fill", rectColorFun)
    })
    .build

  def apply(props: D3ChartProps) = D3Chart(props)
When I try to change the d3.select("body") to d3.select("#someId") the chart doesn't appear
Rodrigo Martinez Jacobson
@Rodrigo-Martinez-Jacobson
Feb 02 2016 11:33

Ok, I fixed it.

 val svg: Selection[EventTarget] = d3.select("body").append("svg").attr("width", "100%").attr("height", "450px")
 val sel: Update[Int] = svg.selectAll("rect").data(js.Array(8, 22, 31, 36, 48, 17, 25))

those lines should be inside of componentDidMount

hamero
@hamero
Feb 02 2016 13:41
@ochrons we need to go all the way, why have another js lib layers below scala.js?
Per Wiklander
@PerWiklander
Feb 02 2016 18:38
@Rodrigo-Martinez-Jacobson You might want to check out https://github.com/Olical/react-faux-dom for your D3 work
sadbuttrue1
@sadbuttrue1
Feb 02 2016 18:39
Hi! Can I ask some stupid question about Ref?
sadbuttrue1
@sadbuttrue1
Feb 02 2016 19:02
Sorry, everything's ok %)
Øyvind Raddum Berg
@oyvindberg
Feb 02 2016 19:25
Dont ask if you can ask @sadbuttrue1 - ask! :)