如何在dimple.js中旋转x轴文本?

2023-11-25

这是我的dimple条形图(由 d3 提供支持):

var sidechart = new dimple.chart(chart_svg, data);
            sidechart.setBounds(60, 30, 200, 300)
            var x = sidechart.addCategoryAxis("x", "Long name");
            sidechart.addMeasureAxis("y", "Measure");
            sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar);
            sidechart.draw();

x 轴上的文本相当长,默认情况下凹坑会旋转它,以便它垂直显示。我想将其旋转 45 度。使用 d3 可以通过以下方式完成:

myAxis.attr("transform", "rotate(-45)");

不幸的是,我无法在酒窝中找到类似的方法。任何帮助将不胜感激。


一旦调用绘制方法并设置变换,您就可以获取形状:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform", "rotate(-45)");

然而,dimple 已经使用变换在刻度之间移动标签并进行旋转,因此您可能需要像这样附加变换:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + " rotate(-45)";
    });

我尝试了这个,它使标签偏离了我预期的位置,因此您可能需要添加翻译,但您可能需要为您自己的图表找到合适的偏移量,我在这里使用 20 作为示例:

...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + " translate(0, 20) rotate(-45)";
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在dimple.js中旋转x轴文本? 的相关文章

随机推荐

  • Qt 的 QGraphicsItem 中的事件和信号:这*应该*如何工作?

    与 Qt 中的其他图元一样 QGraphicsItems 可以处理鼠标事件等 甜的 现在假设我需要将一个 QGraphicsItem 上的事件传播到同一场景中的其他一些 QGraphicsItems 我可以想到两种方法可以解决这个问题 A
  • PHP 的 OAuth 2.0 服务器

    我一直在努力寻找一个支持 OAuth 2 0 作为服务器的活跃开源 PHP 项目 有大量的客户端示例连接到 Facebook Twitter 等 但随着越来越多的人希望通过 API 公开自己的服务 我有点惊讶开源社区尚未解决这一需求 并不是
  • wpf:如何弹出用户控件?

    背景 我有一个使用数据网格来显示数据的项目 数据网格有一个包含用户控件的 rowdetail 列 用户控件有一些文本框供用户输入和显示一些消息 问题 我想在单击按钮时弹出用户控件 并且弹出的用户控件与数据网格的 rowdetail 列中的用
  • 他们是否将 copy_if 添加到 c++0x 中?

    很烦人的是copy if不是 C 中的 有谁知道它是否会在 C 0x 中 由于C 0x还没有最终定型 所以只能看一下最新的draft
  • React-table 单个单元格样式

    我正在使用反应表 并希望根据内部的数量更改特定单元格的背景颜色 前任 单元格 gt 1 绿色 单元格 我知道这段代码不起作用 但希望它能显示我正在寻找的内容
  • 从 XAML 引用嵌套枚举类型

    我似乎无法从 XAML 引用公共嵌套枚举类型 我有课 namespace MyNamespace public class MyClass public enum MyEnum A B 我尝试参考MyEnum在 Xaml 中是这样的 xml
  • 只选择 mysql 中唯一的行/记录

    我想看看如何才能获得具有独特城市的唯一行 记录 而不关心它是否是首都 例如 Akron akron aKRON 只会返回一条记录 我厌倦了这样的事情 但它不起作用 SELECT DISTINCT city AS city state pre
  • 使用 Spring Boot、飞碟和 Thymeleaf 时图像未显示在 PDF 模板中

    我使用 Spring Boot 飞碟 thymeleaf 从 html 模板创建一个 pdf 文件 但图像没有显示在我的文件中 项目结构 代码html div class col xs 6 invoice col 2 img src sta
  • Microsoft Enterprise Library 5.0 日志记录应用程序块线程安全吗?

    我有一些代码将使用 Enterprise Library 5 0 中的日志记录应用程序块从不同的线程进行日志记录 LAB 线程安全吗 我可以像平常一样从不同的线程进行日志记录吗 还是需要同步日志记录代码 以便一次仅从一个线程使用 Enter
  • 对对象列表中的所有对象调用方法的惯用方法

    我有一个对象列表 它们有一个称为 process 的方法 在 Python 2 中可以做到这一点 map lambda x x process my object list 在 Python 3 中 这将不起作用 因为在遍历可迭代之前 ma
  • C# 检查一个图像是否存在于另一个图像中

    我不知道从哪里开始 所以一些指导会很好 我需要实现的是 检查一个大图像 例如 1280x1024 并检查其中是否存在另一个较小的图像 可能是 50x50 像素图像 我尝试通过比较每个像素来做到这一点 这非常慢 而且我可能需要执行 100 多
  • 通过jQuery为每个li元素添加不同的ID

    我是新来的 我想问一个关于 jQuery 的问题 我有无序列表 例如 ul li class something a href a li li class something a href a li li class something a
  • AtomicReference 和 Synchronized 之间有什么区别?

    AtomicReference 和 Synchronized 之间有什么区别吗 E G public class Internet AtomicReference
  • Django 2 中的自定义 LoginView

    我正在尝试在 Django 2 中自定义身份验证和视图 但问题是 如果用户已经通过身份验证 则仍会显示登录表单 并且不会重定向到适当的 URL 为了克服这个问题 我做了以下工作 class CustomLoginView LoginView
  • ListView 未使用 ObservableCollection 正确更新

    我目前正在使用可观察集合来存储 ListView 的数据对象 将新对象添加到集合中效果很好 并且 listView 也可以正确更新 但是 当我尝试更改集合中对象的属性之一时 listView 将无法正确更新 例如 我有一个可观察的集合 Da
  • 地图按钮刷新位置

    我正在为 iPad 开发我的第一个 swift 应用程序 到目前为止 我有一个基本的地图视图 底部工具栏中有一个按钮 我想在单击后刷新并关注用户位置 目前我有这个代码 import UIKit import MapKit import Co
  • 在 Visual Studio 2015 下安装 Platform Toolset v120

    使用 Visual Studio 2015 尝试构建需要的 C C 项目平台工具集 v120 所需的平台工具集尚未填充 From 这个 stackoverflow 帖子听起来好像如果不在同一系统上安装 Visual Studio 2013
  • Highcharts.js - 同一页面上有多个主题?

    我在一页上有大约 6 个图表 其中一个需要与其他五个有不同的主题 我有单独工作的主题 但初始化的第二个主题适用于所有图表 有没有办法指定图表使用哪个主题 阅读 Ricardo 的评论后 我意识到我只需将 setOptions 调用移到 do
  • 为什么 Firefox 中的表格框大小设置为 border-box?

    我发现用 table style padding left 100px width 200px 使内容只有 100px 宽 进一步调查显示 Firefox table moz box sizing border box 规则在其默认样式表中
  • 如何在dimple.js中旋转x轴文本?

    这是我的dimple条形图 由 d3 提供支持 var sidechart new dimple chart chart svg data sidechart setBounds 60 30 200 300 var x sidechart