草庐IT

d3-tooltips

全部标签

javascript - 如何进行多个 api 调用以在 d3 图表中显示单个数据

我正在尝试使用d3在图表中显示数据,方法是使用相同的数据但不同的日期进行2个单独的api调用。第一次API调用:vardata1={'name':'test','id':7948237982937,'startDate':startDate1,'endDate':endDate1,'tz':getTimezoneOffset()};vardata2:{'name':'test','id':7948237982937,'startDate':startDate2,'endDate':endDate2,'tz':getTimezoneOffset()};我正在尝试进行调用并按如下方式显示图

javascript - d3j蛇弯曲路径动画

我有兴趣尝试创建一个受控的弯曲路径。有没有办法绘制特定的坐标和样式来模仿这种设计。我把它想象成一种2DDonnieDarko时间隧道或slinkey/snake。更新1-旅程路径1http://jsfiddle.net/0ht35rpb/241/更新2-旅程2**我用stroke-linecap:round--http://jsfiddle.net/0ht35rpb/243/赋予了它更柔和的外观更新3-旅程3http://jsfiddle.net/0ht35rpb/245/^我已经开始创建多条路径线-好好组织一下,这样更容易制作/控制--本质上,旅程需要包括要通过的关键大门和拐Angu

javascript - d3.js 可见区域计算或如何绘制地理矩形

我想弄清楚如何正确计算可见区并使用d3.geo投影绘制它。在我的例子中,可见区域是光学相机平截头体现在,我有两个图,都代表视点的方位Angular和仰Angular,一个是日经投影(根据wiki)://thismagicnumberisexperimentallyfound//pixelsinonedegreeingnomonicprojectionchartwithscale1500varpx=26.8;下面的宽度和高度是光学相机视角,以方位Angular和仰Angular轴的度数表示varw=px*viewport.width;varh=px*viewport.height;d3.

javascript - d3.js 中的图形方向和节点定位

多亏了这个早question,我在d3.js中使用强制布局生成了一个静态固定布局图,如下所示:我有两个具体问题来进一步自定义布局:首先,我注意到确定性地初始化节点位置(例如,在此处对Angular线完成,请参阅script了解详细信息)固定节点的位置,并且节点的方向似乎取决于此初始化以及尺寸力图*。我想知道如何使上图中的节点A、D、E、F、I水平对齐?换句话说,我想将图形的方向逆时针旋转大约45度。我尝试在中间水平初始化节点:nodes.forEach(function(d,i){d.x=w/size*i;d.y=h/2;});但是生成的输出中所有节点和边都水平放置在它们被初始化的位置

javascript - 使用带有 d3.js 和 nvd3.js 的序号 x 轴的折线图

我正在尝试根据数据集制作折线图,同时保持X轴分类。对于观察者来说,它看起来像一个折线图,观察点的X坐标之间的间距是等距的:(1------5------30------600)现在我得到这样的东西:(1-5-----30--------------------600)这是我的数据集:vards1=[{key:'VAR-1',color:'#FF7F0E',values:[{"x":"600","y":0.07706},{"x":"30","y":0.00553},{"x":"5","y":0.00919},{"x":"1","y":0.00969}]}];我尝试创建序数轴并将其设置在折

javascript - D3 绘制数据集的选择性部分

我有一个大型时间序列数据集需要绘制图表,我正在尝试使用D3来完成它。我计划让我的图形的x轴为时间,并允许图形在x方向上移动。我想让图表只加载/显示屏幕上当前时间范围内存在的点。例如,如果我的数据集有1-100次,但图形以显示的时间1-10开始,则图形应该只绘制1-10点。然后用户可能会向右移动并查看时间5-15,图表应相应更新。任何人都可以向我解释如何通过d3完成此操作吗?我很难理解从一次加载并立即绘制整个数据集到选择性地绘制数据子集。 最佳答案 我认为您正在寻找selection.filter()功能。例如你可以有:varallN

javascript - d3.js 缩放仅在光标位于图形像素上时有效

我正在尝试以最简单、最基本的方式在树状图上实现缩放功能,并且已经让它发挥作用。唯一的问题是缩放事件仅在光标位于边缘、节点或文本上时有效。当光标位于svg的任何部分时,如何允许缩放?varmargin={top:20,right:120,bottom:20,left:120},width=2000-margin.right-margin.left,height=2000-margin.top-margin.bottom;varx=d3.scale.linear().domain([0,width]).range([0,width]);vary=d3.scale.linear().doma

graph - d3.js 中的网络多路由正交图

我们想用d3画一个网络路由图,起始节点和结束节点是固定的,但中间的路径不同,可能共享一些节点,例如:我阅读了来自Configurefixed-layoutstaticgraphind3.js的评论并成功创建了一个简单的图形,如:但是当我向图中添加更多节点时,它变得随机(刷新后不是静态的)并且不再是正交的:所以我的问题是:是否可以使用d3.js来绘制接近所需的东西图形?或者有没有我应该在我的工作中使用的算法图实现? 最佳答案 在这里看我的演示。http://jsfiddle.net/doraeimo/JEcdS/主要思想是基于树建立连

javascript - 0 用 d3 系列数据填充空值

我正在使用D3制作多折线图,但在呈现时遇到了一些问题。我正在尝试使用如下所示的数据呈现两行:[{key:"line1",values:[{x:1,y:1},{x:2,y:2}]},{key:"line2",values:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]“第2行”渲染得很好,但“第1行”在x=2时停止渲染。我知道我的数据集可能被认为是不完整的,但我很好奇是否有办法将默认值设置为0,其中x有间隙或空值吗?特别是在这个例子中,我希望“第1行”在x=3的地方显示y=0。 最佳答案 D3和NVD3没有执行此操

javascript - 将使用 D3js 创建的 SVG 转换为 PNG

我有一些用D3js创建的图表,我想通过JavaScript将其转换为PNG图像,以便用户可以下载图表。我见过将SVG转换为Canvas并将Canvas转换为图像的解决方案。这对我不起作用,因为SVG使用类来设置元素的样式(由于可维护性,我宁愿不更改),这会导致整个Canvas变成黑色并带有非常粗的线条。是否可以将SVG图表直接转换为PNG?该页面位于RubyonRails项目中,因此它不必是纯JavaScript解决方案,但我更愿意使用JavaScript来执行此操作,这样我也可以在其他项目中实现它。 最佳答案 要在Canvas中显