Безопасный стек с d3.js

Question

Я пытаюсь интегрировать визуализацию данных, созданную с помощью d3, в шаблон по умолчанию для стека SAFE.

Как образец концепции, я пытаюсь интегрировать эту гистограмму: http://fable.io/fable-graphics/samples/d3/barchart/index.html

Мне удалось вставить код для гистограммы в client.fs:

let svg = Fable.Import.D3.Globals.select("#display")
                                 .append("svg")
                                 .attr("width", U3.Case1 width)
                                 .attr("height", U3.Case1 height)

Все компилируется и работает нормально, но я не могу понять, как на самом деле сделать изображение видимым на сгенерированной странице.

Я предполагаю, что это должно быть вставлено в представление:

let view (model : Model) (dispatch : Msg -> unit) =
    div []
        [ Navbar.navbar [ Navbar.Color IsPrimary ]
            [ Navbar.Item.div [ ]
                [ Heading.h2 [ ]
                    [ str "SAFE Template" ] ] ]
......

но я сделал несколько попыток и не могу заставить что-то скомпилировать.

Кто-нибудь знает как это сделать?

Спасибо

Answer 1

Оказывается, это было довольно легко.

Все, что было нужно, это изменить селектор с "#display" на что-то, что гарантированно существует, например, "body"

let svg = Fable.Import.D3.Globals.select("body")