nvd3 中的cumulativeLineChart 上的自定义工具提示

2023-11-22

当我将鼠标悬停在累积折线图上的线上时,我在某个 y 时间收到一条工具提示消息 x 值。我想编辑此消息并添加更多内容。

因为在我的值数组中,我有包含 {X:x, Y:y, Z:z, Dt:date} 的 json,所以我希望显示一条自定义消息,列出日期的 X/Y/Z。


我正在使用 nvd3 veraion 1.1.15b。

Calling .tooltip()不适合我,但打电话.tooltipContent()做了,如下面的代码所示:

        var chart = nv.models.pieChart()
            .x(function (d) { return d.file; })
            .y(function (d) { return d.size; })
            .tooltipContent(function (key, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                    '<p>' + e.value.toSizeFmt() + '</p>';
            })

As Andrei上面指出,e参数提供对原始值的访问,以便您可以格式化它们,而不是使用y这是已经格式化的文本。希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nvd3 中的cumulativeLineChart 上的自定义工具提示 的相关文章

  • Angular svg 或 canvas 使用颜色渐变

    我正在使用 Angular 和 d3 创建一个甜甜圈 在指令中 我可以非常简单地给填充区域指定颜色 在这个 plunker 中它是蓝色 但我想做的是让 SVG 平滑地改变其颜色 0 33 3 red 33 4 66 66 orange 66
  • d3.js:如何在圆环图中的标签下方添加值

    我是 d3 js 的新手 到目前为止我所取得的成就是 this https jsfiddle net saras arya ypdw96v9 使用教程和视频 Now I am trying to add the dataset value
  • 将 D3 svg 保存为高质量图像

    有没有办法将 D3 SVG 图像保存为高质量图像 如果是的话请解释一下 截至目前 我正在使用以下代码将 svg 保存为图像 但我得到的图像质量不高 var canvas1 document createElement canvas canv
  • 我可以为我的 r 闪亮界面使用 index.html 和 ui.r 吗?

    在参照this http shiny rstudio com articles html ui html关于如何完全用 HTML 构建闪亮的应用程序 我想知道是否有任何方法可以将这种方法与传统的 ui r 方法结合使用 Reason Thi
  • d3.js:是否可以通过键而不是索引来进行转换?

    我有不同长度的数据数组 x值 年 是有限年数的一部分 例如 var data Year 2008 Value 5 Year 2009 Value 6 or var data Year 2007 Value 8 Year 2009 Value
  • 调整小倍数迷你图

    我有一个热图 显示一些数据和热图每行的迷你图 如果用户单击行标签 则数据按降序排列 因此每个矩形都会放置在正确的位置 反之亦然 如果用户单击列标签 每个反应都以正确的方式放置 但我无法放置迷你图 这是代码 http plnkr co edi
  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • d3.js v4 中的 d3.locale(),本地化

    我正在使用 d3 js 制作图表 现在想将其更新到 v4 结果发现d3 locale 由于所有日期格式的翻译都采用不同的语言 因此不再起作用 我该如何解决这个问题 我正在挖掘论坛 但对于 v4 我并没有真正找到它 你必须使用d3 timeF
  • 选择 G 元素内的路径并更改样式

    本质上 我试图让除悬停的路径之外的所有路径都变成灰色 而选择的路径则保持其原始颜色 我已经能够将所有其他路径变成灰色 但是我在使用 select this 函数并实际访问我想要更改样式的路径时遇到了问题 看来我实际上已经成功地找到了 g 组
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var
  • d3 (v4) 树布局和打字稿:类型“HierarchyNode”上不存在属性“x”

    我正在尝试在使用时使用正确的 ts 类型d3 hierarchy具有树布局的根 例如 interface MyCustomGraphType id string children MyCustomGraphType let treeData
  • 如何使用数据对象中的值指定 d3.js 选择器?

    我在 Web 应用程序中使用 d3 js 描述我想要做的事情的最简单方法是查看下面链接的 Fiddle 但基本设置是我有一个包含数据对象的数组 my data id B text I want this text in B id C tex
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto
  • d3.js:非线性图轴

    我正在尝试在轴上添加自定义比例 如下所示 这个想法是 一个刻度总是比前一个刻度大 2 倍 我的理解是 这是一个定制秤 我做了一些研究 但找不到类似的东西 所以我想我的问题实际上是两个问题 这个尺度是数学世界的 标准 吗 这是否可以使用来实现
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q
  • 如何根据形状字段值将两个不同的形状添加到 D3 力向图?

    我是D3的新手 我正在使用力定向图 我想在节点的位置添加两种不同类型的形状 我的 json 如下 nodes name 00 00 00 00 00 00 00 01 group 0 shape 1 name 00 00 00 00 00
  • DC.js 中的工具提示(D3 库)

    DC js 具有强大的内置功能 可显示每个工具提示文档 https github com dc js dc js blob master web docs api latest md title titleFunction 功能 无论如何
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu

随机推荐