草庐IT

d3-tooltips

全部标签

javascript - d3 在给定半径内为气泡图设置动画

//气泡图基础。http://jsfiddle.net/NYEaX/1450/我正在尝试为气泡设置动画-通过改变它们的比例-如果可能的话,它们会淡入淡出。在某个阶段,我需要用某种重力将它们聚集在一起,以占据更多的包容圆周。(function(){vardiameter=250;varsvg=d3.select('#graph').append('svg').attr('width',diameter).attr('height',diameter);varbubble=d3.layout.pack().size([diameter,diameter]).value(function(d

javascript - 为什么我的 D3 线图显示每个实体的黑色区域?

我制作了一个网络爬虫,它获取有关不同银行的货币转账率的数据,并在D3线图中显示随时间变化的数据(每家银行都有一条线,汇率是每天)。cronjob服务器端确保每天进行抓取。在前端,它使用D3.json从这个url获取数据:http://rateswebscraper.herokuapp.com/rates我制作了折线图,但它显示的不是每个银行的线,而是黑色区域,请参见下面的屏幕截图:这是我的代码:/*globald3*/varmargin={top:20,right:50,bottom:20,left:50};varw=1000-margin.left-margin.right,h=50

javascript - d3 v4 圆环图具有与小值重叠的文本和折线

我正在尝试弄清楚如何排列标签以使它们不重叠。这是图表的图片如您所见,对于非常小的值,文本标签重叠。我试图遍历每个文本元素并修改它的位置,但这似乎不起作用。你可以在这个函数的底部看到我试图获取每个文本元素的位置然后修改它。我究竟做错了什么?我已经研究了几个小时。_renderDonutChart(){letself=this;//console.log("DonutChartisbeginningrender")lettextOffset=14;self.graph.data[0].forEach(function(d){d.value=+d.value;})console.log(se

javascript - d3.js - 变换和过渡,多行

我已按照以下说明进行操作:http://bost.ocks.org/mike/path/用于使用单行创建和动画化单个图形。并且,弄清楚了如何在图表中创建多条线:DrawingMultipleLinesinD3.js主要问题:在将新数据移动并插入我的数据阵列后,我很难转换多行。我创建了N行:(时间:纪元时间,向前迈进)varseriesData=[[{time:1335972631000,value:23},{time:1335972631500,value:42},...],[{time:1335972631000,value:45},{time:1335972631500,value

javascript - Requirejs、d3 和 nvd3 集成

我正面临整合requirejs的问题与d3和nvd3,并且我使用require的shim找到了一个简单的解决方案.使用垫片我可以导出一个变量,我也可以定义依赖关系:d3:{exports:'d3'},nvd3:{exports:'nv',deps:['d3']},这样,我只需用bower安装d3和其他包,并用require包含它们,它非常快速和干净。尽管如此,我遇到了以下问题:全局d3变量和本地变量(注入(inject)到需要的模块中的变量)之间可能存在一些冲突。这是与转换和选择相关的d3/require/nvd3集成问题。我不完全理解这个问题,但我已经可以做出一些考虑。jquery和

javascript - 适合与 D3js 结合的库,以允许绘制到 webgl (2D)

这是我正在尝试做的:http://mbostock.github.com/d3/talk/20111116/iris-splom.html但我想在webgl2d中执行此操作(因为SVG性能非常慢,渲染10kSVG仅已降至12fps)通过快速搜索,我发现了几个webgl-2d库:cocos2d-html5,pixijs,Three.js和webgl-2d(废弃?)它们看起来很简单,但我想做的是数据可视化。cocos和pixijs是2d游戏库。我是webgl和那些库的新手,所以SO方面的专家你们能推荐一下吗?我需要的东西的总结:互动:地block内的矩形选择。单击以选择某些元素。缩放和平移

javascript - 如何在 Rickshaw/D3 中设置 x 轴的最小值/最大值?

我想显示“今天”的基于时间的数据的线性图。中午时,只有一半的图表会被填充,因为系列不包含更多数据。如何让rickshaw显示完整的图表,而不仅仅是包含现有数据的时间范围? 最佳答案 我遇到了同样的问题并通过添加具有所需最小和最大x值的null数据点解决了这个问题:vargraph=newRickshaw.Graph({element:document.getElementById('chart'),width:500,height:200,renderer:'line',series:[{data:[{x:-5,y:null},{x

javascript - 有什么方法可以在大文件上加速 d3.csv 吗?

许多大型CSV文件可以使用例如压缩显着压缩压缩包。有什么方法可以通过减少需要通过互联网传输到浏览器中的javascript的数据量来加速大型CSV文件的D3。例如,如果我有一个30MB的CSV文件foo.csv压缩成一个9MB的foo.csv.gz文件,我可以传达较小的文件并调整D3以在执行其余操作之前解压缩它吗?d3.csv处理。 最佳答案 没有。D3不提供任何处理压缩文件的功能。您可以使用第三方库,例如JSZip,但是您将无法直接使用d3.csv。 关于javascript-有什么方

javascript - d3 Sankey - 是否有可能影响或决定节点的位置?

我正在使用d3.js的Sankey插件。有没有办法影响节点的自动放置?如果你比较下面两张图片。自动生成桑基图:https://files.secureserver.net/0s3DEU5s3OZtqL在我手动重新排列后:https://files.secureserver.net/0sYJF1w7f54wdF您会看到节点彼此居中对齐,这使得在您手动重新排列节点之前很难使用图表。我能否以某种方式影响此流程-还是它就是这样?顺便问一下-有没有办法指定节点的文本不应长于节点的高度? 最佳答案 根据demo及其解释,没有办法影响放置(并且简

javascript - jquery for tooltip on image map area shapes

我已经开始使用我发现的一些jquery示例为图像映射创建悬停时的自定义工具提示。$(function(){$(document).tooltip();});Youruserid:当我将鼠标悬停在图像映射区域上时,它会在屏幕左上角弹出工具提示,而不是靠近鼠标指向的位置。它出现在每个形状的相同位置。对于其他元素,例如我在此处包含在图像下方的“标签”演示,工具提示会出现在标签的右侧,它应该在的位置。我尝试根据whatIseehere添加位置信息,但我添加的任何内容要么没有效果,要么使代码无效,我什么也得不到。如果我添加此职位信息,我看不到任何变化:$(document).tooltip({m