如何将节点标题放置在 d3 Sankey 图中节点的左侧或右侧?

2024-01-31

这是我指的例子:http://bl.ocks.org/d3noob/c9b90689c1438f57d649 http://bl.ocks.org/d3noob/c9b90689c1438f57d649

第二级节点的标题位于其右侧。如何将它们放置在节点的左侧?请帮忙。


这就是为节点制作文本的方法。

  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(function(d) { return d.name; })
      .filter(function(d) { return d.x < width / 2; })
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");

为了使右侧的文本始终执行以下操作:

  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(function(d) { return d.name; })
    //.filter(function(d) { return d.x < width / 2; }) //COMMENT THIS LINE
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");

注释上面显示的行,以便它不会过滤> SVG 宽度一半的节点。

工作代码here http://plnkr.co/edit/Djg5PvYVdxFW8w3E8aAW?p=preview

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

如何将节点标题放置在 d3 Sankey 图中节点的左侧或右侧? 的相关文章

  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • d3 地理投影从正交到 X 的过渡

    我正在开发一个教育地图项目 其中显示不同的地图投影 我想在选择不同投影之间实现变形过渡 我找到了一个很好的例子来实现它 并且我没有遇到太多的麻烦来重新创建它 不幸的是 我还需要裁剪投影的功能 这与目标状态完美配合 但在改变投影时则不然 当选
  • 如何运行 D3 示例

    例如https observablehq com d3 zoomable treemap https observablehq com d3 zoomable treemap 如果将脚本片段粘贴到
  • 将文本放置在矩形的中心

    在下面的代码中 文本没有放置在矩形的中心 我使用的是 attr dx x bandwidth 2 attr dy y bandwidth 2 有没有办法将文本中心放置在矩形中 而不是反复试验 目前它看起来像这样 朝底部和朝右 以下是我的代码
  • 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 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 使用 CSS Grid,从任何地方滚动 div(不使用 jQuery 插件)

    div 怎样才能 scroll content https jsfiddle net blehmanade x1k3rhj7 33 可以从页面上的任何位置滚动吗 现在 scroll content仅当鼠标位于其上方时才可滚动 但是 当鼠标位
  • DC.js 中的工具提示(D3 库)

    DC js 具有强大的内置功能 可显示每个工具提示文档 https github com dc js dc js blob master web docs api latest md title titleFunction 功能 无论如何
  • nvd3 格式化日期始终返回 1970-01-01

    我正在尝试使用构建折线图nvd3 for d3js但我在 x 轴上使用日期域时遇到了一些问题 这是我的代码 data lineChart key key1 values x 2014 04 20 y 6 x 2014 04 13 y 5 x
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • d3 仅限整数刻度线

    我有一个 d3 条形图 其值范围为 0 3 我希望 y 轴仅显示整数值 我可以这样做 var yAxis d3 svg axis scale y orient right tickFormat d3 format d 但是 非整数标记处仍然
  • 平移/缩放顺序尺度?

    我正在使用 d3 渲染简化的甘特图 并使用 d3 behavior zoom 进行平移和缩放 x 刻度是一个时间刻度 稍微修改为列中的中心日历日等 并且工作得很好 但是我在决定如何缩放 平移 y 刻度时遇到问题 其域是通常会出现的任务列表图
  • 如何在 Angular 2 中实现 D3

    我想将这段代码从 d3 js 实现到 Angular 2 组件 但我不知道如何将 js 文件调用到组件 ts 文件中 我找到了一些折线图的代码 包括index html和lineChart js 我怎样才能调用javascriptngAft
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • 如何进行多个 d3 窗口大小调整事件

    我有三个svg一页上的元素 每个元素都由 D3 陪伴 每个都有自己的页面调整大小逻辑 由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应 问题在于 只有最后一个调整大小事件被触发 因为
  • d3.js 强制布局是否允许动态 linkDistance?

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

随机推荐

  • 如何从jqgrid中的dataurl获取行id或参数以创建动态选择列表来编辑行

    我有一个 ASP NET 网站 其 C 后端使用 Jqgrid 我希望用户能够选择网格中的项目进行编辑 可编辑的字段之一将作为下拉选择列表呈现给用户 其中仅包含对该用户有效的选项 例如 假设我有一个显示人员的网格 如果编辑 person1
  • Activity 无法设置在其范围内定义的变量?

    这让我摸不着头脑 我想知道我是否理解正确 我试图在活动中定义一个可供子活动使用的变量 父级应该能够在运行时在此变量中设置一个值 这是精简的 Parent 类 public sealed class Parent NativeActivity
  • 如何将犰狳与 Eclipse 链接

    我想将犰狳与 Eclipse 一起使用 然而 链接犰狳的所有说明都是针对 Visual Studio 给出的 现在我按照自述文件中概述的说明进行操作犰狳图书馆 http arma sourceforge net download html
  • DBus如何启动服务

    我很好奇如何为 DBus 启动自己的服务 在官方网站上 我找到了很多有关从客户端角度使用 DBus 服务的信息 但如何启动和开发服务还不够 1 接口文件ServiceName xml应该位于哪里 2 服务文件ServiceName serv
  • Firefox 扩展:取消请求并发出虚假响应

    我正在尝试开发一个 Firefox 扩展 它可以丢弃对某个站点的每个 HTTP 请求并返回一个虚假响应 任何请求都不应到达原始 Web 服务器 但我希望能够创建自定义响应 我尝试拦截 http on modify request 消息 但取
  • 基于Web服务实现快速更新行标签

    我有一个包含 7 行的表视图 周一 周二 周日 我的应用程序从 Web 服务接收一个 json 其格式为 appointments numApts 1 scheduleDate 2015 11 02 numApts 2 scheduleDa
  • C# 将 int 转换为字符串并填充零?

    在 C 中 我有一个整数值需要转换为字符串 但需要在之前添加零 例如 int i 1 当我将它转换为字符串时 它需要变成 0001 我需要了解 C 中的语法 i ToString PadLeft 4 0 好的 但不适用于负数 i ToStr
  • 如何更改 UISearchBar 字体大小和颜色?

    我已经用谷歌搜索了几个小时如何更改我的 UISearchBar 字体大小和颜色 但我无法找到任何与之相关的文档 这是我到目前为止在 swift 4 上所做的 searchBar UISearchBar frame CGRect x 0 y
  • 为什么可以在同一个类中创建的另一个线程中访问局部变量?

    我真的找不到关于这个确切主题的任何内容 所以如果问题已经存在 请引导我走向正确的方向 根据我对 NET 的了解 不可能跨不同线程访问变量 如果该语句错误 请纠正我 这只是我在某处读到的内容 然而 现在在这个代码示例中 它似乎不应该工作 cl
  • 将背景颜色设置为 HighChart xAxis 标签

    如何为 HighChart xAxis 标签设置背景颜色 我尝试了以下但没有运气 x轴 类别 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 标签 旋转 90 风格 颜色 89A54E 填写 000 背景颜色 F
  • 导航到“url”,等待“load” - Python Playwright Issue

    嘿 我在 python playwright 中有用于获取页面源代码的代码 import json import sys import bs4 import urllib parse from bs4 import BeautifulSou
  • 悬停后保持下拉菜单打开(CSS)

    我创建了一个水平菜单 当您将鼠标悬停在某个项目上时 会出现一个下拉菜单 这一切都很好 但是 当您离开菜单项 使用下拉菜单 时 下拉菜单就会消失 我知道这是因为你不再悬停它 但我该如何解决这个问题 注意 我不希望下拉菜单直接位于其下方 我希望
  • 无法在 Angularjs 中使用 templateUrl 加载模板

    我刚刚学习 Angularjs 以及如何使用 templateUrl 加载模板 我有一个简单的指令 var mainApp angular module mainApp mainApp directive request function
  • 如何将文本区域的标签对齐到顶部?

    我确实有一个表格数据 如下所示 td td
  • 空字符串而不是不匹配的组错误

    我有这段代码 for n in range 1 10 new re sub r regex group regex regex r something str n r 1 old count 1 它会抛出不匹配的组错误 但如果它不匹配 我想
  • 启用 Vuforia 时 Unity 崩溃

    在 XR 设置中启用 Vuforia 增强现实支持 时 我的编辑器崩溃 以下是我遵循的步骤 重现步骤 1 创建一个新项目 2 文件 gt 构建设置 gt 播放器设置 gt 播放器 3 从 XR 设置中启用 Vuforia 增强现实 复选框
  • 使用 matplotlib 从图中获取数据

    我在 python 中使用 matplotlib 来构建散点图 假设我有以下 2 个数据列表 X 1 2 3 4 5 Y 6 7 8 9 10 然后我使用X作为X轴值 Y作为Y轴值来绘制散点图 所以我会有一张上面有 5 个散射点的图片 对吧
  • STM32 Nucleo 上的上升沿中断多次触发

    我正在使用 STM32 NUCLEO F401RE 微控制器板 我有一个扬声器 经过编程 当向上 向下推操纵杆时 可以按设定的量改变频率 我的问题是 有时 通常 当向上 向下推动操纵杆时 频率会增加 减少多次 这意味着 ISR 正在执行多次
  • 通过网络桥接串行端口

    对于使用串行端口进行通信 确切地说是 Modbus RTU 的应用程序 我需要通过网络桥接串行端口以进行测试 所以我想要以下设置 Device Network PC SerialPort SerialPort Map Serialport
  • 如何将节点标题放置在 d3 Sankey 图中节点的左侧或右侧?

    这是我指的例子 http bl ocks org d3noob c9b90689c1438f57d649 http bl ocks org d3noob c9b90689c1438f57d649 第二级节点的标题位于其右侧 如何将它们放置在