程序员经验分享-hwhale

如何在条形图上制作垂直角？ [复制]

2023-12-02

有没有一种简单的方法可以将圆角放置在 D3 垂直条形图中的条形顶部？我一直在使用 .attr("rx", 3) ，这似乎会影响 Bar 的所有四个角。


您无法指定要在 SVG 中圆化哪些角：rx将影响所有 4 个角。

唯一的解决方案是使用路径来模拟矩形。此函数返回顶角为圆形的路径：

function rectangle(x, y, width, height, radius){
    return "M" + (x + radius) + "," + y + "h" + (width - 2*radius) 
    + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + 
    (height - 2*radius) + "v" + radius + "h" + -radius + "h" + 
    (2*radius - width) + "h" + -radius + "v" + -radius + "v" + 
    (2*radius - height) + "a" + radius + "," + radius + " 0 0 1 " 
    + radius + "," + -radius + "z";
};

这是一个演示片段，显示了带有这些路径的“条形图”，带有半径（rx此处等效）为 5px：

function rectangle(x, y, width, height, radius){
	return "M" + (x + radius) + "," + y + "h" + (width - 2*radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2*radius) + "v" + radius + "h" + -radius + "h" + (2*radius - width) + "h" + -radius + "v" + -radius + "v" + (2*radius - height) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius + "z";
};

var data = [40, 50, 30, 40, 90, 54, 20, 35, 60, 42];

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 120);
	
var rects = svg.selectAll(".paths").data(data).enter().append("path");
rects.attr("d", function(d,i){ return rectangle(10+40*i,100-d,20,d,5)});

var texts = svg.selectAll(".text").data("ABCDEFGHIJ".split("")).enter().append("text").attr("y",114).attr("x", function(d,i){return 16+40*i}).text(function(d){return d});
path {
  fill:teal;
}

text {
  fill:darkslategray;
  font-size: 12px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>

PS：这个函数不是我写的，它是基于这些答案作者：M. Bostock 和 R. Longson。

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

d3js

如何在条形图上制作垂直角？ [复制] 的相关文章

  • 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

  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行？

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www

  • 在 D3 中在外部加载的 svg 图形上绘图

    我已经从 svg 文件加载了外部图形 我想尝试在其上绘图 但不知道如何操作 我的简单 d3 代码在这里

  • D3 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065

  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale

  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding

  • 将文本放置在矩形的中心

    在下面的代码中 文本没有放置在矩形的中心 我使用的是 attr dx x bandwidth 2 attr dy y bandwidth 2 有没有办法将文本中心放置在矩形中 而不是反复试验 目前它看起来像这样 朝底部和朝右 以下是我的代码

  • 如何使 d3 饼图响应式？

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div

  • DC.js 中的工具提示（D3 库）

    DC js 具有强大的内置功能 可显示每个工具提示文档 https github com dc js dc js blob master web docs api latest md title titleFunction 功能 无论如何

  • 在d3.js中将2D形状转换为3D，并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

  • 如何避免多系列折线图d3.js的工具提示重叠

    我已经在多系列折线图上创建了工具提示 如下所示在这里回答 https stackoverflow com questions 34886070 d3 js multiseries line chart with mouseover tool

  • d3 仅限整数刻度线

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

  • 未捕获的类型错误：无法读取未定义的属性“albersUsa”

    以前可能有人问过这个问题 但我希望我能得到针对我遇到的问题的答案 我是 d3 的新手 我现在正在尝试绘制一个纬度 经度 当我成功完成第一个纬度 经度时 我将完成其余的工作 感谢专家的任何帮助 谢谢 尝试在特定区域绘制蜂窝基站 这是代码

  • dc js 复合条形图 折线图

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

  • 如何使用 d3.format 获取可本地化或可定制的 si 代码

    使用 SI 代码绘制图表正是我们想要的 我们的 y 轴值往往是较大的货币值 例如 10 411 504 201 20 缩写这个 至少在美国语言环境中 这应该转换为 10 4B 但是使用 d3 format 的 s 类型表示 SI 代码 这将

  • d3.js 强制布局是否允许动态 linkDistance？

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

  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe

  • d3js 折线图——如何将最后一步延伸到范围末尾？

    很简单 但我无法摆脱这个问题 线是两点 值 之间的链接 从值 A 绘制到值 B 因此 假设 A 的值为 10 B 的值为 20 而 C 缺失 现在从 0 到 10 到 20 的线已经绘制完毕 我想画从 0 到 10 到 20 到 25 的线

  • 表格中与文本一起内嵌 D3 迷你图

    假设有一个这样的表 var data Orange Orange 6 3 3 2 5 Apple Red 6 2 6 5 5 Grape Purple 9 1 2 3 1 我希望将字符串表示为字符串 但将数字数组表示为 D3 折线图 如果这

随机推荐

  • 如何在 VBScript 中循环？

    我想知道如何 或者甚至知道是否可以在 VBScript 中的循环内循环 从逻辑上讲 世界是这样运作的 Do until y 5 msgbox msgbox 1 loop test Do Until z 5 msgbox msgbox 2 l

  • R 中的过滤和显示过滤数据摘要的奇怪之处

    我有一个使用 R 中的 CSV 库加载的数据框 例如 mySheet lt read csv Table csv sep 我现在可以打印该 mySheet 对象的摘要 summary mySheet 它将向我显示每一列的摘要 例如 名为 D

  • go中如何导入本地包？

    我是新来的 正在处理我想要本地化的示例代码 在原来的main go导入声明是 import log net http github com foo bar myapp common github com foo bar myapp rout

  • 节点服务器在解析 JSON 时崩溃

    看起来我的节点服务器死掉了parseJSON 查看日志 最后一条消息是 解析之前 并且从未打印 解析之后 奇怪的是 我用 try catch 包装了 JSON pars 所以我不确定它是如何导致服务器崩溃的 有什么想法吗 logger pr

  • glmmLasso 错误和警告

    我正在尝试使用 glmmLasso 在广义线性混合模型中执行变量选择 但出现了一个我无法解决的错误和警告 数据集不平衡 一些参与者 PTNO 拥有比其他参与者更多的样本 无缺失数据 我的因变量是二进制的 所有其他变量 除了 ID 变量 PT

  • 如何从Google Play商店获取应用市场版本信息？

    如何从 Google Play 商店获取应用程序版本信息 以便在 Play 商店应用程序更新时提示用户强制 建议更新应用程序 即用户使用旧版本应用程序时 我已经经历过android 市场 api这不是官方方式 并且还需要授权登录来自谷歌的身

  • 类将数据成员存储在顺序内存中？

    这个问题的简短版本 指向类的第一个数据成员的指针是否会导致指向其所有数据成员的指针 讨论 我正在阅读一些示例代码 这很有趣 当一个特定的函数 在本例中是glUniformMatrix4fvOpenGL 中的 C 函数 将数组作为参数 这是使

  • Javascript 模式：条件事件处理程序

    给定例如某种类实例具有状态 例如 活动 非活动 该实例还附加了一个点击事件 例如一个链接 但事件处理程序根据实例的状态执行不同的操作 伪代码 IF instance state IS active AND link is clicked T

  • 在 iOS 上通过 FCM 使用丰富推送通知中的数据

    我的问题可能很糟糕 但我在任何地方都找不到任何答案 我迷路了 所以我想在 iOS 10 中显示带有漂亮图像的丰富通知 为此 我使用 FCM 和 UNNotificationServiceExtension 如果我理解正确的话 它应该获取数据

  • 无法共同创建对象/找不到绰号 |雅各布

    当创建一个ActiveXComponent使用 JACOB 我收到以下错误 com jacob com ComFailException Can t co create object at com jacob com Dispatch cr

  • MF SinkWriter 写入样本失败

    我正在尝试使用 MediaFoundation 将 ID3D11Texture2D 编码为 mp4 下面是我当前的代码 初始化接收器写入器 private int InitializeSinkWriter String outputFile

  • 关于Linux的二进制兼容性

    如果我在 Ubuntu 上得到一些由 GCC 4 8 构建的 C 代码 该代码没有 GUI 界面 仅调用标准 Linux 库 那么该二进制文件可以在 RHEL 5 6 上完美运行 并且可以与更旧的 GCC 一起完美运行吗 一般情况下是不能的

  • 返回包含文件的目录

    R 中是否有命令可以返回包含正在执行的代码的文件的完整目录路径 类似于 PHP 的命令 SERVER SCRIPT FILENAME 我可以想到三个答案 但没有一个答案可能让您完全满意 因为 R 执行模型与 PHP 不同 按顺序排列 a R

  • 您可以从 .Net Microsoft Graph API 获取 PR_TRANSPORT_MESSAGE_HEADERS 0x007D 吗？

    我们使用别名电子邮件地址来将收到的电子邮件与客户进行匹配 所有别名地址都会传送到一个主邮箱中 ToRecipients 中未列出别名地址 如果我在 OWA 中打开电子邮件并查看邮件详细信息 我可以在邮件标头的 收件人 属性中看到别名 我尝试

  • Postgresql 使用 like 选择数组重叠的位置

    是否可以确定是否ARRAY列包含来自另一个数组的重叠值LIKE clause The 运算符有效 但字符串必须完全匹配 q select from articles where keywords mortgage brokers Exact

  • 如何使用 Microsoft Graph API 更新 SharePoint 列表中的人员或组列的值？

    我的情况 我正在使用微软图形API 测试版 更新 SharePoint ListItems 但是 我无法更改 个人或组 列的值 该列具有 允许多项选择 属性 并接受个人和组 这是它作为 ListItem columnSet 的一部分的样子

  • Powershell 和 cmd 环境变量

    我使用批处理脚本来设置该 shell 的一些本地环境变量 当我从该命令提示符启动 PowerShell 时 我期望这些环境变量在 PowerShell 脚本中可用 但我不认为这种情况会发生 有人可以帮助我我所缺少的吗 这些环境变量应该存在于

  • facebook 的社交登录在 ASP.Net MVC 5 项目中不起作用

    我正在学习在我的示例网站中实现 facebook 社交日志的教程 以下是我所做的步骤 将我的本地主机应用程序指向 https 并允许在 VS 中使用假 SSL 在 Facebook 开发者网站上创建了一个 Web 应用程序 并记下密钥和 I

  • 父母和孩子之间的沟通

    新手问题 在 Unix 上 在具有父级和一些子级的程序中 家长如何提醒孩子有效率的做一些工作 或者孩子们如何等待父母信号开始做一些工作 EDIT 该程序尝试并行执行复杂的计算 我已经使用共享内存作为所有子项的公共工作区来更新结果和数据传输

  • 如何在条形图上制作垂直角？ [复制]

    这个问题在这里已经有答案了 有没有一种简单的方法可以将圆角放置在 D3 垂直条形图中的条形顶部 我一直在使用 attr rx 3 这似乎会影响 Bar 的所有四个角 您无法指定要在 SVG 中圆化哪些角 rx将影响所有 4 个角 唯一的解决

热门标签