- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试创建动态旭日图,它会缩放选定的弧线并隐藏其他弧线。这很好用,只要我避免使用值大于 0 的 arc.cornerRadius()。
我在 (attrTween) arcTween 函数中记录了生成的弧线,输出对我来说似乎是正确的,但以下 svg 路径不同,其中第二个路径导致 d3.min.js:5 中出现错误。
正确路径:
M0,58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,-58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,58.528989440000004M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z
错误路径:
M0,55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,-55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,55.73917966222222M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z
这是我设置半径的方式:
var graphMaxRadius = 83;
var innerBtnRadius = 55;
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(innerBtnRadius, yScale(d.y)); })
.outerRadius(function(d) { return Math.max(0, Math.min(yScale(d.y + d.dy), graphMaxRadius)); })
.cornerRadius(function(d) { return 10;});
我的第一个猜测是,cornerRadius 与隐藏弧发生冲突,并且发生了无效的 svg,所以我尝试了各种尺寸。但是所有 > 0 都会导致错误,输出为:
M0,55A55,55 0 1,1 0,-55A55,55 0 1,1 0,55M0,50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,-50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,50.006635519999996Z
d3.min.js:5 Error: Invalid value for <path> attribute d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNLNaN,NaNANaN,NaN 0 0,1 NaN,NaNZ"
d3.min.js:5 (anonymous function)
d3.min.js:3 l
d3.min.js:1 Lt
d3.min.js:1 qt
这是我的 arcTween 函数(根据 github issue 上的 mbostok 进行编辑):
return function arcTween(d) {
var xd = d3.interpolate(xScale.domain(), [d.x, d.x + d.dx]);
var yd = d3.interpolate(yScale.domain(), [d.y, d.y + d.dy]);
var selectionRadius = innerBtnRadius - 5;
//radius -5 reduces width of inner circle and selection rim
var yr = d3.interpolate(yScale.range(), [d.y ? selectionRadius : innerBtnRadius, radius-5]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { xScale.domain(xd(t)); yScale.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
有什么想法吗,我接下来要检查什么?
附注
抱歉,没有 jsfiddle,因为他们目前还没有安装 d3 v3.5
(我缺少数据导入)。我的代码与此处的示例相似:zoomable sunburst
这是d3.js库中出现错误的断点的截图,但我仍然不知道:
最佳答案
请记住,cornerRadius 是 D3 分区布局中相对较新的功能,因此可能仍存在一些与之相关的错误。
但是,我的印象是您的问题不存在。
根据您链接到的示例,我创建了一个小的 codepen .
与示例相同,只是使用了较小的数据集,并将数据保存在脚本本身,而不是 JSON 文件中。
此外,我集成了 cornerRadius,检查了各种值 - 一切都像 charm 一样工作,如下图所示。
我无法集成您的 tween 函数,因为其余代码中缺少一些细节。
看来您需要检查并重写您的代码,尤其是与 arcTween() 相关的任何内容。
说明我示例中有效执行的屏幕截图:
cornerRadius
为 5:
cornerRadius
为 20:
cornerRadius
为 100:
关于javascript - D3 sunburst 图 : Setting arc. cornerRadius() causes invalid path with arcTween,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27838938/
我正在尝试向 iOS 应用商店提交更新。我要从 Buzztouch 应用程序转到 Sprite Kit 应用程序。我能够存档 Xcode 项目并提交它。该应用程序的状态为“上传已收到”,但大约一分钟后
我收到了这个奇怪的警告。我不确定是什么原因造成的。 .dia文件扩展名应该表示核心有向图图形文件。我没有添加,应用程序几乎没有用户界面。 最佳答案 我对这个答案并不满意,但我认为它可以帮助人们,直到找
下面用作 Uri 参数的程序集限定字符串在 XAML 中工作,但在代码中使用时会出现错误。 我尝试了各种 UriKind,结果都相同。我该如何解决这个问题? [Test] public void La
我正在开发一个 Angular 应用程序,目的是将其部署到移动设备和 Web 浏览器上。设置表单样式以显示无效输入时,我应该定位 Angular“ng-invalid”类还是 HTML5“:inval
我有一个在 Google App Engine 上运行的应用程序,它是 Android 应用程序的后端。它基本上是 Android 应用程序和在我自己的服务器上运行的 MySQL 数据库之间的桥梁。
我的代码是这样的: func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle,
I need to encrypt using Python with the A256GCM algorithm, and getting back a JWT that I need to
无法成功编译webpack并生成bundle.js文件。据我了解,我的 src_dir 和 dist_dir 变量能够指向正确的路径,但在尝试编译时我仍然始终收到两个错误之一。 配置对象无效。 Web
因此,当我在 postgres 上运行 regexp_matches 时收到一条错误消息,并且无法弄清楚如何通过它。它似乎在 regex101 等 reg_exp 测试站点上运行良好,但不幸的是在实际
这些是我正在使用的导入: import com.novell.ldap.*; import java.io.UnsupportedEncodingException; 我正在尝试进行一个非常简单的密码
在记录器函数的简写情况下,Pylint 提示 Invalid constant name "myprint"(invalid-name)。 # import from utils import get
我试图创建一个HTML输入标签,该标签仅接受以2种格式之一输入的数字,并拒绝所有其他输入。 我只想接受以下格式的数字,包括破折号: 1234-12 和 1234-12-12 注意:不是日期,而是合法的
我一直在尝试使用 Bootstrap 的表单样式处理 AngularJS 的电子邮件验证,并遇到了这个 CSS block 。 input:focus:required:invalid, textar
我正在编写一个程序,以确保我了解如何在 C 中正确实现单向链表。我目前正在哈佛的 CS50 类(class)中学习,并且使用本教程,因为 CS50 人员不解释链接详细列出数据结构:https://ww
此问题与询问同一消息的另一个问题不重复,但在另一个上下文中。这个问题的上下文只是关于上传截图图像和获取消息。 今天,我在将图片上传到 App Store Connect 时收到一条新消息: Inval
我的代码似乎运行良好,但当我滑动以删除 UITableView 中的一行时,应用程序崩溃并显示以下内容: 错误 LittleToDoApp[70390:4116002] *** Terminating
当我尝试发送语音消息时,总是收到无效的url错误。我正在使用Whisper将音频转换为文本,但由于某种原因,我似乎无法将文件传递给Whisper。当我在Java脚本中使用它而不是在TypeScrip中
我正在尝试在 flutter 上对 http 客户端进行单元测试。在模拟 http 和我的存储库类之后: void main() { MockHttpCLient mockHttpCLient;
我正在使用 pandoc 作为一个库,相关的代码片段是: module Lib ( latexDirToTex, latexToTxt ) where import qualified
我正在开发一个(相对简单的)Rails应用程序。我正在使用Devise gem处理用户 session 。每当我导航到localhost:3000/users/sign_in时,我都会看到Devise
我是一名优秀的程序员,十分优秀!