时间戳

首页 > 解决方案 > 使用 d3.js 的安全堆栈

f# - 使用 d3.js 的安全堆栈

问题描述

我正在尝试在 SAFE 堆栈默认模板中集成使用 d3 创建的数据可视化。

作为概念证明，我正在尝试整合这个条形图： 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" ] ] ]
......

但我做了一些尝试，无法编译。

有谁知道如何做到这一点？

谢谢

标签： f#fable-f#

解决方案

事实证明这实际上很容易。

所需要的只是将选择器从“#display”更改为像“body”这样保证存在的东西

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

推荐阅读