如何使用序数轴更改刻度线的文本

2024-06-09

我有包含下一个属性的图表:

barChart
       .width(width)
       .height(height)
       .dimension(dim)
       .group(group)
       .x(d3.scale.ordinal())
       .xUnits(dc.units.ordinal)

我的轴刻度看起来像“ZZxBob”、“PxBob”

如何对每个刻度使用“x”分割功能?


轴完全由 D3 生成。

您可以使用chart.xAxis() http://dc-js.github.io/dc.js/docs/html/dc.coordinateGridMixin.html#xAxis__anchor检索 x 轴对象,然后axis.tickFormat() https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#tickFormat更改其显示方式。

所以,例如显示 x 之前的部分:

barChart.xAxis()
    .tickFormat(function(l) { return l.split('x')[0]; })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用序数轴更改刻度线的文本 的相关文章

  • 按单位和百分比排列的堆积条形图

    Summary 我想显示一个条形图 其维度为天 堆叠类别为另一个 即 x 轴 天且堆栈 类别 1 但是 我不是显示每个组 堆栈的简单数量总和 而是显示想要显示一天的百分比 JSFiddle https jsfiddle net wostoj
  • 行图在 dc.js/crossfilter 中仅选择一个条形图?

    我有一个 dc rowchart 它有 5 个不同的 类别 最初 所有内容都被选中 当我单击其中一个时 只有该一个会突出显示 当我单击第二个时 我单击的第一个和第二个都会突出显示 如何制作 配置行图 以便每次单击栏时仅突出显示一个类别 dc
  • DC.js 数据表的自定义文本过滤器

    我正在构建一个仪表板来显示一些数据 我有几个图表和一个列出所有数据的表格 我正在尝试添加搜索功能来过滤图表 我有很多公司以及每个公司的一些数据 因此 如果我搜索 Appl 则数据表中只会列出以 Appl 开头的公司 并且图表将反映这一点 当
  • 禁用 dc.js 中的交互性

    我有许多使用创建的条形图dc js 在默认行为中 用户可以单击并拖动其中任何一个来更新交叉过滤器 如何使图表 仅显示 也就是说 当其他组件更新交叉过滤器时 图表也会更新 但用户无法选择 仅显示 图表中的数据来更新交叉过滤器 None
  • 单击第一个图表中的数据点时,dc.js 访问多个图表中的数据点

    使用同一数据集的不同维度 屏幕上会显示三个 dc js 折线图 当用户单击任何折线图上的数据点时 我希望从所有其他图表 包括单击的图表 中找到并返回该对应点的数据值 我还尝试 在鼠标悬停时 将悬停的数据点的圆圈填充颜色更改为红色 以及所有其
  • 减少大数据集 DOM 元素的策略

    我有一个大型数据集 想使用 dc js 显示 条目数量远远超出了屏幕上可用的绘图空间 以像素为单位 因此 在 500 像素宽的图表上渲染 20k 点是没有意义的 而且还会降低浏览器的速度 我读了维基百科的性能柚木部分 https githu
  • 来自 Crossfilter 示例的复合图

    从付款示例开始交叉过滤器 https github com square crossfilter wiki API Reference https github com square crossfilter wiki API Referen
  • dc.js barChart 第一个和最后一个栏未完全显示

    我有一个条形图d3 time scalex 轴 我每小时显示一些数据 但使用时第一个和最后一个数据点条总是被切成两半centerBar true 当使用centerBar false 最后一个栏完全消失 时间窗口基于数据本身 计算如下 va
  • 为什么画笔阻止 dc.js barChart 工具提示出现?

    我不明白为什么要实施这种行为 有什么好的理由吗 为了具有画笔功能 必须在图形顶部绘制一个捕获所有鼠标事件的透明矩形 这可以防止任何鼠标事件触发主图形元素上的工具提示事件处理程序 这就是dc js API https github com d
  • 如何使用 d3 生成 svg 客户端而不将其附加到 DOM(与 React.js 一起使用)

    我正在使用 React js 构建一个应用程序 其中包含相当多的 svg 图表 我使用 d3 函数来帮助创建图表 例如比例尺 然后使用 React 生成 svg 元素 这是关于该方法的精彩文章 http 10consulting com 2
  • 如何从 dc js 图表中的 x 轴删除周末日期

    我有 2018 年 1 月以来每个日期的数据 我正在根据这些数据创建一个堆积折线图 每个周末我的数据计数为零 因此每个周末它都会在我的图表中显示下降 当数据达到零时 我想避免这种下滑 我有一个日期列和一个日列 日 列的值从 1 到 7 代表
  • 带有 Angular2+ 的 dc.js 图表

    有人将 dc js 与 Angular2 应用程序一起使用过吗 任何帮助或指示将不胜感激 我能够使我的应用程序在正常的 html java 脚本上运行 现在我需要在 Angular 2 应用程序中实现相同的功能 Edit 几周后 我有了更好
  • DC.js 中的工具提示(D3 库)

    DC js 具有强大的内置功能 可显示每个工具提示文档 https github com dc js dc js blob master web docs api latest md title titleFunction 功能 无论如何
  • 如何在dc.js中过滤dataTable而不影响其他维度

    因此 有一段时间我一直在努力解决如何在 dc js 中过滤数据表而不影响其他维度 这似乎违反直觉 因为它违背了 crossfilter dc js 背后的数据过滤器 的最佳表现 但我将解释为什么这是相关的 假设我有一个人名 年龄和性别的数据
  • dc js 复合条形图 折线图

    我有一个 dc js 条形图 如下所示这个叉形小提琴 http jsfiddle net 89218vf1 3 此条形图将加载预定义的过滤器 例如本例中的 25 35 现在 我需要显示一个与条形图复合的折线图 突出显示带有高低线的过滤数据
  • 隐藏 dc.js 图表 x 轴

    如下图所示 由于数据范围较大 x 轴非常混乱 我想删除 x 轴 幸运吗 我当前的代码 toneChart width 300 height 280 dimension tone group toneGroup title function
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 如何使用 dc.js 或 d3.js 为行图添加轴标签

    对于条形图和堆积图 我们可以使用 xAxisLabel X Axis Label and yAxisLabel Y Axis Label 为各个轴添加标签的函数 但 有没有办法为行图添加轴标签 尝试这样的事情 dc renderAll fu
  • DC.js 复合图表在条形中心对齐折线图的点

    我正在尝试创建一个复合图表 我的要求是绘制条形图 折线图和虚线图 为此 我绘制了一个综合图表 现在我遇到的问题是折线图的点从条形图的开头开始 但我需要从线的中心开始 您可以在中看到问题这个 JSFiddle http jsfiddle ne

随机推荐