如何在离散BarChart nvd3.js上设置y轴上的域和比例

2023-11-25

我在我的一个应用程序中使用 d3.js 图表。 他们在这张图片中 看Charts

对于货币图表上的 Y 轴(参见图片),我希望最大值四舍五入为 400,无论这里的最大条形大小是多少,它都是 358.72 美元,但我想将条形保持在 358.72,但在 Y 轴上它将是 400 限制。

它的代码在这里

tradesChart = [ 
      {
        key: "Cumulative Return",
        values: [
                        {
            "label" : "6E",
            "value" : 100       },
                    {
            "label" : "NG",
            "value" : 100       },
                    {
            "label" : "TF",
            "value" : 67        }        ]
      }
    ];
        nv.addGraph(function() {

      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value/100 })
          .staggerLabels(true)
          .showValues(true)
          .valueFormat(d3.format('.0%'))

      chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; });

      d3.select('#chart-trades svg')
        .datum(tradesChart)
        .transition().duration(500)
        .call(chart);

      nv.utils.windowResize(chart.update);

      return chart;
    });

请帮我解决这个问题


您需要修改Y轴刻度的域。通常它是从数据的最大值导出的,语句如下:

yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]);

对于您的情况,您应该将其修改为更像这样:

yScale.domain([0, 400]);

或者,如果您想设置数据的最大值or最小静态值,您可以执行如下操作:

yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]);

一个完整的例子 jsfiddle 是here.

这就是如何使用 D3.js 做到这一点,我不熟悉古老的 nvd3.js 库,所以我不确定如何访问秤,但我会看一下,看看是否能找到它。

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

如何在离散BarChart nvd3.js上设置y轴上的域和比例 的相关文章

  • 使用 d3.json()/d3.xhr() 进行多部分发布请求

    目前是否不支持通过请求提交多部分表单数据 我了解如何使用 d3 json post 执行 POST 如上所述here https stackoverflow com questions 12493758 xhr post request u
  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac
  • d3.js V4 按钮缩放实现表现得很奇怪

    我正在尝试实现 d3 平移和缩放功能 默认的平移和缩放工作正常 但要求是我们还需要放大和缩小按钮 我还实现了缩放按钮 它也有效 奇怪的是 当我第一次移动图像并单击缩放按钮时 图像会移回到以前的位置 不仅是当我第一次用鼠标缩放并使用按钮再次开
  • D3:使用 d3-tile 缩放到边界框

    我已成功将 D3 矢量 地图分层到从 Mapbox 提取图块的 d3 tile 光栅 地图之上 手动缩放效果非常好 矢量和光栅都是同步的 我现在正在尝试实施迈克 博斯托克 缩放到边界框 https bl ocks org mbostock
  • 具有水平和垂直组合布局的可折叠树

    我正在尝试在 D3 中创建一个可折叠树 它结合了水平 第一级和第二级 和垂直 3 级 布局 这里有一个jsfiddle http jsfiddle net artemkolotilkin z7tb23Lo 到目前为止我所得到的 除了一件事之
  • D3.js 中的点图

    我有兴趣创建一个Dot plot 每个数据值都有连续的点 但到目前为止我所管理的是为每个值创建一个点 更清楚地说 假设对于 array1 我希望第一个值创建 5 个圆圈 第二个值创建 4 个圆圈 依此类推 array1 5 4 2 0 3
  • d3 同步 2 个独立的缩放行为

    我有以下 d3 d3fc 图表 https codepen io parliament718 pen BaNQPXx https codepen io parliament718 pen BaNQPXx 该图表的主要区域有缩放行为 y 轴有
  • 如何使用 D3 (或只是 javascript)将表单选项设置为“选择”

    有没有一种方法可以搜索选择表单元素中的所有选项 并将具有匹配值的选项指定为 已选择 var xStat G var statOptions Points PTS Goals G Assists A Penalty Minutes PIM c
  • D3 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • D3 v4 在同一元素上进行画笔和缩放(鼠标事件不冲突)

    我的目标是构建一个使用两者的 D3 v4 图表d3 zoom https github com d3 d3 zoom and d3 brush https github com d3 d3 brush一起 如下 当鼠标位于 x 轴上时 用户
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • 根据边界动态设置初始 d3 缩放 - V4

    我要在页面上显示大量节点 大多数情况下 由于节点放置 圆圈会超出屏幕的可见区域 有没有办法根据节点的整个边界框动态设置初始缩放级别 以便所有节点都适合屏幕的可见区域 Updated 我为此添加了一个小提琴https jsfiddle net
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 根据子节点数量动态调整 d3 树布局的大小

    从这个例子来看http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk 20111018 tree html我已经建立了一个d3
  • d3.js 强制布局是否允许动态 linkDistance?

    我使用力布局来表示有向未加权网络 我的灵感来自以下例子 http bl ocks org mbostock 1153292 http bl ocks org mbostock 1153292 我的问题是 在我的情况下 节点之间有更多的链接

随机推荐

  • 如何使用 window.open 设置文件名

    我正在尝试下载由 JavaScript 计算的临时结果 假设我有一个字符串str 我想下载一个文件包含str并将其命名为data csv 我使用以下代码 window open data text csv charset utf 8 str
  • 多线程环境下的文件访问策略(Web App)

    我有一个文件 它是从 Web 服务获取并在 Web 应用程序中本地缓存的一些数据的 XML 表示形式 这个想法是这个数据是very静态的 但只是might改变 因此 我将其设置为缓存到一个文件 并在其上放置一个监视器以检查它是否已被删除 删
  • C# 使用 System.Linq 错误

    为什么 使用 System Linq 可能会导致以下错误 类型或命名空间名称 Linq 确实 命名空间 System 中不存在 参考System Core 然后还有其他人也合并了这个命名空间 但这是主要的在 Net 3 5 及更高版本上 如
  • ADT 插件无法安装:缺少要求:Android 开发工具

    我尝试在 eclipse helios windows 64 位经典上安装 ADT 插件 我收到这个错误 无法完成安装 因为找不到一项或多项所需的项目 正在安装的软件 Android开发工具16 0 1 v201112150204 2385
  • SQL Server 将字符串转换为日期时间

    这并不是询问如何在 MSSQL 中将任意字符串转换为日期时间 例如这个问题 我可以控制字符串格式 但我想知道使用日期字符串更新日期时间字段的 MSSQL 语法是什么 UPDATE MyTable SET MyDate CONVERT dat
  • PDO 更新不替换准备好的语句中的占位符[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下代码更新表格 如果我改变WHERE temp booking id temp booking id 使用实际的当前会话temp id 查询将运行 但将占位符添加到表中 例如 签出 作为值 dat
  • 使用huggingface Trainer 与分布式数据并行

    为了加快性能 我研究了 pytorch分布式数据并行并尝试将其应用于变压器Trainer The DDP 的 pytorch 示例指出这应该at least更快 DataParallel是单进程 多线程 只能在单机上运行 而Distribu
  • 我需要获取我的 firebase 数据库的最后一个子项

    i want to get last child from my firebase data structure in which i only know the reference of received and first child
  • Go 模块拉取旧版本的包

    我正在尝试使用 go 模块将新包添加到我的项目中 该包使用 github com docker docker client 并且在项目之外运行良好 当我跑步时go mod vendor它拉取版本 v1 13 1 的 docker 客户端包
  • 以非多态方式调用虚函数的成本是多少?

    我有一个纯抽象基类和两个派生类 struct B virtual void foo 0 struct D1 B void foo override cout lt lt D1 foo lt lt endl struct D2 B void
  • 如何在 Ubuntu 中的 Visual Studio Code 上开发(运行和调试)Odoo v11 模块?

    是否可以在 Visual Studio Code 上运行和调试 Odoo 如果是 请分享我的配置 视觉工作室代码是 Microsoft 为 Windows Linux 和 macOS 开发的源代码编辑器 它包括对调试 嵌入式 Git 控制
  • 如何在 AS3 中创建自定义 MouseEvent.CLICK 事件(将参数传递给函数)?

    这个问题不仅与 MouseEvent CLICK 事件类型有关 而且与 AS3 中已存在的所有事件类型有关 我阅读了很多有关自定义事件的内容 但直到现在我还不知道如何做我想做的事情 我将尝试解释一下 希望您能理解 这是我的情况的说明 for
  • 使用 ifort 进行数组复制时程序崩溃

    这个程序崩溃了Illegal instruction 4在 MacOSX Lion 和 ifort IFORT 12 1 0 20111011 上 program foo real pointer a b allocate a 5400 5
  • 在画布中拖动时图像闪烁

    我正在画布中拖动图像 但在拖动过程中图像会闪烁 我认为函数调用存在一些问题 我已经实现了 onmousedown onmouseup 和 onmousemove 事件的功能 我在拖动过程中将图像绘制到画布上 这是我的代码 div div
  • 如何在 C++ 中重复字符串多次?

    我想在 C 中的字符串开头插入 n 个空格 或任何字符串 有没有直接的方法可以使用 std strings 或 char 字符串来执行此操作 例如 在 Python 中你可以简单地做 gt gt gt 5 lolcat lolcat 在重复
  • 如何获取进程ID来杀死nohup进程? [关闭]

    Closed 这个问题是与编程或软件开发无关 目前不接受答案 我正在服务器上运行 nohup 进程 当我尝试杀死它时 我的腻子控制台会关闭 这是我尝试查找进程 ID 的方法 ps ef grep nohup 这是杀死命令 kill 9 17
  • 如何保持对话框中的沉浸模式?

    当我的活动显示自定义对话框时 如何维护新的沉浸模式 我使用下面的代码来维护对话框中的沉浸模式 但是使用该解决方案 当我启动自定义对话框时 导航栏会出现不到一秒钟 然后就会消失 以下视频更好地解释了该问题 当导航栏出现时 请查看屏幕底部 ht
  • Flutter:Streambuilder 导致 Firestore 上的读取次数过多

    我正在尝试构建一个简单的报价 Flutter 应用程序 在其中显示报价列 表并允许用户 喜欢 报价 我正在为此使用 Streambuilder 我的问题是 Firestore 使用仪表板显示的读取次数非常多 每个用户几乎 300 次 即使我
  • 服务帐号需要哪些预定义 IAM 角色才能完成 Google Cloud Run 快速入门:构建和部署?

    我想将 Google Cloud Run 与 Google App Engine 和 Google Cloud Functions 进行比较 云跑快速入门 构建和部署似乎是一个很好的起点 我的应用程序默认凭据太宽泛 无法在开发过程中使用 我
  • 如何在离散BarChart nvd3.js上设置y轴上的域和比例

    我在我的一个应用程序中使用 d3 js 图表 他们在这张图片中 看Charts 对于货币图表上的 Y 轴 参见图片 我希望最大值四舍五入为 400 无论这里的最大条形大小是多少 它都是 358 72 美元 但我想将条形保持在 358 72