d3 添加 html 链接到表中的数据列

2024-07-01

我是 d3 和 Javascript 的新手,我正在尝试添加一个<a>元素(带有 href 属性)到指定数据列中的每个值。目前我正在使用以下代码来生成表:

function tabulate(data, columns) {
var table = d3.select("#data_table").append("table"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

// append the header row
thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) {
        return column;
    })
    .on('click', function (d) {
        rows.sort(function (a, b) {
            if (isNaN(a[d])) {
                return d3.ascending(a[d], b[d]);
            }
            else {
                return b[d] - a[d];
            }
        });
    });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr");

// create a cell in each row for each column
var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {
                column: column, value: row[column]
            };
        });
    })
    .enter()
    .append("td")
    .html(function(d) {
        return (d.value);
    });

return table;
}
//render the data
tabulate(data, ["NAME", "1", "2", "3", "4"]);

我想根据单元格中的值使“NAME”列中的每个值成为指向网站的超链接。例如:如果名称列中有一个值为“my_value”,它将是一个指向“http://测试/我的值 http://test/my_value“。任何帮助表示感谢!


您必须在过滤数据后附加一个链接,如下所示:

cells.filter(function(d, i) { return i === 0})
    .append("a")
    .attr("href", function(d) {
        return "http://test/" + d.value;
    })
    .html(function(d) {
        return (d.value);
    });

See https://jsfiddle.net/o64e570x/1/ https://jsfiddle.net/o64e570x/1/

也可以使用列名进行过滤

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

d3 添加 html 链接到表中的数据列 的相关文章

  • 在另一个函数中使用两个不同的axios request函数

    如何在另一个函数中调用两个不同的axios函数 仅当第一个函数成功并返回 200 时 才能调用或实现第二个函数 functions js有两个函数将被导出以在server js 请求的正文是从 json 文件导入的 functions js
  • .catch() 的承诺被拒绝,但在 Promise.allSettled 中显示为已履行[重复]

    这个问题在这里已经有答案了 这是问题的简化版本 有一些承诺 但很少 then 链条 以及一个 catch 错误处理块 每个承诺都可能解决或拒绝 因此我使用Promise allSetted根据排列顺序和状态了解哪个承诺失败了 当所有承诺都解
  • 属性的状态:已弃用或已过时?

    我是 HTML 5 的新手 有问题需要在diverseW3 HTML 标准化文档获取属性的状态 例如 bgcolor的属性自 HTML 4 01 起 不应再使用该元素 它已被弃用 看 http www w3 org TR html4 pre
  • React 组件使用 useState 渲染两次

    当没有任何东西被用来触发重新渲染组件时 我真的很难弄清楚发生了什么 Events js当我删除组件时 组件渲染两次useState 来自Event js它渲染一次 但我需要保留它 当我使用useEffect 在事件组件内 第四次渲染 我只是
  • 限制 JavaScript 函数调用,但进行排队(不丢弃调用)

    函数如何限制其调用速率 如果调用过于频繁 则不应丢弃 而应排队并及时间隔开 相隔 X 毫秒 我看过throttle http drupalmotion com article debounce and throttle visual exp
  • Tensorflow.js 与 React-Native

    我知道tensor flow js是一个以网络为中心的库 但出于好奇 我也在react native上尝试了它 它有点有效 它仅适用于调试模式 并在调试模式关闭时抛出错误 错误说窗口 位置 搜索不是一个对象 经过一些研究 我发现窗口对象是在
  • Swift - 将 HTML 文本转换为属性字符串

    在我的一个模块中 我想使用 UILabel 将多语言 HTML 文本 英语和泰米尔语 显示为 NSAttributedString 如果文本是纯英文 我可以按照我的愿望显示它 但我的内容同时包含英语和泰米尔语字符 我该如何处理这种情况 如果
  • MomentJS:如何将 MM/DD/YYYY 中的日期解析为 DD/MM/YYYY

    如何在澳大利亚和美国时间格式中使用 moment js 例如 07 08 2017 对于两种时间格式都有好处 但是 30 08 2017 对于 moment js 无效 但我可以有这样的 dateTime 您可以在这里检查 http jsf
  • Javascript 日期时间字符串转 UTC 日期时间和 UTC 转本地日期时间

    我需要将字符串转换为 UTC 日期 然后将 UTC 日期转换为本地日期 这是我的代码 var dateStr 9 8 2015 12 44 00 PM console log strtoUTCtoLocal dateStr function
  • d3.js 雷达图 - 填充线条之间

    我正在尝试在其中两个三角形之间创建填充 例如在红色和绿色三角形之间创建红色填充 有人知道如何做到这一点吗 我见过另一个雷达图的例子 我相信它做了类似的事情 尽管我认为他们使用CSS而不是d3创建填充 使用径向图用 mbostock 的答案解
  • Javascript“悬停时”循环

    任何人都可以帮助我解决这个问题 我有一个按钮 当悬停时会触发一个操作 但我希望只要按钮悬停就重复它 我很感激任何解决方案 无论是在 jquery 还是纯 javascript 中 这是我的代码此时的样子 在 jquery 中 var scr
  • 如何在单击时和用户单击离开时关闭菜单?

    我有以下代码 function document ready function clicker class click function show menu users show jQuery clicker class click fun
  • 未知深度的普通 JS 级联选择

    想要制作一个通用的级联下拉菜单 但递归能力较弱 代码应该以 做出选择后 即可选择物品 衣服或小玩意 Levis Gucci 或 LG Apple 之一 当做出选择时 一件选择 搭配 Levis 牛仔裤或夹克或 Gucci 鞋子或连衣裙 当做
  • Javascript 逗号列表,但最后一个有一个 and

    我正在尝试创建一个函数 它将接受单词列表 并将其转换成这样的句子 jsfiddle http jsfiddle net 0ht35rpb 107 http jsfiddle net 0ht35rpb 107 数组列表 contents 0
  • 如何将网页从一个域重定向到另一个域?

    当第一个域 网页 加载时 如何将域重定向到另一个域 纯 HTML 替代方案如下HTML 中的标签 The 0这里是页面在重定向之前必须保持打开状态的秒数 在这种情况下 一旦您加载页面 它就会立即发生 与建议的 JS 解决方案相反 这在禁用
  • 将 div 放置在 activeX 对象上

    我有一个需要在 ActiveX 对象上弹出的 div 框 但 ActiveX 对象似乎具有无限高的 z 索引 即使当我将该索引设置为低时也是如此 我的 div 框继续显示在 ActiveX 对象下 有任何想法吗 您需要在要覆盖的对象上放置一
  • 从 Firefox 扩展打开当前选项卡/窗口中的 URL

    我正在创建一个 Firefox 扩展 从菜单项打开当前选项卡中的 URL 的 javascript 是什么 例如在我的overlay xul 文件中 我有以下行
  • 从 Verdaccio 软件包版本历史记录中删除版本

    我使用取消发布版本npm unpublish
  • 通过 http 在两个 Node.js 服务器之间传输文件

    我有两个通过 http 相互通信的 node js express 服务器 server A它还与浏览器通信并可以处理文件上传请求 当文件上传到server A我想将其原样转移到server B以便进一步加工 最好的方法是什么 最好与请求
  • 克隆元件查找器

    在研究可用的同时ElementFinder and ElementArrayFinder方法 我注意到有一个clone method http angular github io protractor api view ElementFin

随机推荐

  • PublishResult 内的 ConcurrentModificationException - ArrayAdapter

    我继承的一些源代码有时会在这一行抛出 ConcurrentModificationException for String c filteredList body Override protected void publishResults
  • fclose() 之后 fwrite() 成功

    我遇到了一个奇怪的行为fwrite 我关闭流后成功fclose 但该文件不会被覆盖为fflush fails 我的代码是 int main int argc char argv FILE file fopen file txt w if f
  • hyperledger-composer v1.1:无法实例化链码

    我目前正在研究 hyperLedger Composer v1 1 并正在遵循教程 我设法将链代码安装到网络上 但它在实例化时失败 有人可以告诉我为什么吗 任何帮助表示赞赏 Command 作曲家网络启动 networkNametutori
  • Npgsql:一个连接,多个命令

    是否可以针对一个连接执行多个 NpgslqCommand 我的意思是 conn Open ExecuteCommandA conn ExecuteCommandB conn ExecuteCommandC conn conn Close 我
  • 如何将 Postgres JSONB 数据类型与 JPA 结合使用?

    我没有找到使用 JPA EclipseLink 从 PostgreSQL 映射 JSON 和 JSONB 数据类型的方法 有人在 JPA 中使用这种数据类型并且可以给我一些工作示例吗 所有答案都帮助我找到了适合 JPA 的最终解决方案 而不
  • 评论插件审核工具不起作用

    我正在尝试设置 Facebook 评论社交插件 该插件将被设置为我们网站上的每个产品页面都会有一个带有唯一 URL 的评论插件 我希望能够对所有评论进行统一审核 这应该可以通过 Facebook 上的评论审核工具来完成 我可以将社交插件放在
  • DataTable 不是 DataTables JQuery 库的函数错误

    我有一个使用 Datatable 库的简单示例 我让它与 JSFiddle 一起工作 http jsfiddle net 3hhn7y7f http jsfiddle net 3hhn7y7f 但是当我尝试使用实际文件执行此操作时 出现以下
  • VHDL RS-232 接收器

    我一直在尝试采用 FSM 方法设计 RS 232 接收器 我承认我对 VHDL 没有非常全面的理解 所以我一直在即时编写代码并边学习边学习 然而 我相信此时我已经碰壁了 我的问题是我的代码中有两个进程 一个用于触发下一个状态 另一个用于执行
  • 如何从 django 中的 RawQuerySet 检索值?

    我的输入查询是 query select from tab1 left join tab2 on tab2 patient id tab1 patient id tab3 left join tab4 on tab4 patient id
  • 使用表格作为表格可以接受吗?还是使用div更正确?

    我想知道是否可以接受使用tables 代表表格 严格来说 名称 值对是表格数据 不是吗 表单只是用户可定制的一组名称 值对 那么使用是否正确table在这种情况下 或者我应该使用div使用 CSS 设计样式 尝试字段集 我更喜欢将字段分解为
  • 我怎样才能制定一个结构指令来包装我的 DOM 的一部分?

    目前 我的 HTML 中有以下行 p this is my first line p 使用包装器指令 我想添加第二段并将其包装在 div 中 因此它看起来像这样 p this is my first line p 然后该指令将添加包装器和第
  • 使用 Excel 创建组合

    我想知道Excel中是否有一个函数或函数组合 可能需要VBA 可以帮助我解决以下问题 团里有8个人 我需要找出并显示从 8 个人中选择 4 个人时创建的所有可能的非重复组合 所选个人的顺序并不重要 我只需要找到所有独特的组合 例如 这 8
  • 在 onDestroy() 中使用 system.exit(0) (Android)

    我知道不建议在 Android 应用程序中使用 system exit 0 但我想知道在 onDestroy 中使用它是否可以 因为此时允许杀死应用程序 我问的原因与this https stackoverflow com question
  • Rails 从模型生成迁移

    我一直在读关于Rails 迁移 http guides rubyonrails org migrations html帮助我开始构建 Rails 项目 我对 db migrate 中文件的生成有点困惑 我设计应用程序的方式是从模型开始 尽我
  • 回复电子邮件:如何将多个“空白”(不是真正的空白;仅由“>”组成的行)压缩为一行?

    我正在尝试做类似的事情this https stackoverflow com questions 4521162 can i use the sed command to replace multiple empty line with
  • 这可以强制iOS键盘弹出英文键盘吗?

    如果用户的 iOS 设备上有多个键盘 这可以强制弹出英文键盘吗 谢谢 From iOS 文本编程指南 https developer apple com library ios documentation StringsTextFonts
  • Mysql 选择主键 = x 的记录

    我的 mysql 表中有一个主键 它由三列组成 CREATE TABLE IF NOT EXISTS bb bulletin OfficeCode int 5 NOT NULL IssuerId int 11 NOT NULL Bullet
  • pdf下载 html2pdf

    我正在使用 html2pdf 类来生成 pdf 在我的问题中 它为 html 代码生成 pdf 但它没有提供下载该 pdf 的对话框选项 请帮助我的情况如下
  • 获取kendo下拉值的选定id

    如何从下拉列表中获取所选名称的 ID 当选择Apples然后得到了id1并选择Oranges then 2 这是简单的剑道下拉示例
  • d3 添加 html 链接到表中的数据列

    我是 d3 和 Javascript 的新手 我正在尝试添加一个 a 元素 带有 href 属性 到指定数据列中的每个值 目前我正在使用以下代码来生成表 function tabulate data columns var table d3