草庐IT

d3_graph_chart

全部标签

javascript - 使用Web Worker和D3.js异步生成图?

我目前正在解决一个问题,该问题要求我的Web应用程序生成一个代表大约50k到60k数据点的图表。它加载速度相当快(约6秒),但我想知道是否可以使用D3.js在WebWorker中生成图形,然后将SVG传回以加载到页面中。 最佳答案 WebWorker没有DOM访问权限,因此您在这方面所能做的就是构建可用于快速创建DOM的东西。例如,工作人员可以处理数据集并进行所有繁重的计算,然后将结果作为一组数组传回。 关于javascript-使用WebWorker和D3.js异步生成图?,我们在St

javascript - D3树垂直分离

我使用的是D3树布局,例如:http://mbostock.github.com/d3/talk/20111018/tree.html我已根据需要对其进行了修改,但遇到了问题。这个例子也有同样的问题,如果你打开了太多的节点,它们就会变得紧凑,使阅读和交互变得困难。我想在重新调整舞台大小时允许这样的间距的同时定义节点之间的最小垂直空间。我尝试修改分离算法使其工作:.separation(function(a,b){return(a.parent==b.parent?1:2)/a.depth;})那没用。我还尝试计算哪个深度有最多的child,然后告诉舞台的高度为children*spac

javascript - 如何为 Bar Chart.js v2 创建圆 Angular 条?

尝试roundthebarsonbarchart正如在这篇文章中找到的那样工作如jsFiddle中显示的那样假如。这是版本1。在我使用的图表中,由于Chart.types.Bar.extend中对extend的引用加载失败导致脚本崩溃。如果我使用默认选项,图表加载没有问题。我必须将Chart.types.Bar.extend放在末尾,以便默认选项正确加载。运行并全屏查看。我尝试用我的Chart.js2.4.0版本实现它。Chrome报告:UncaughtTypeError:Cannotreadproperty'extend'ofundefinedchart.js这段代码甚至不会在这里运

javascript - D3 如何根据下拉框选择更改数据集

我正在尝试根据下拉框选择更新/更改矩形的数据。我尝试了各种方法,但我对D3调度功能的理解还不够深入。如果有人可以更新这段代码,我将不胜感激,这样我就可以看到它在实践中是如何工作的。我有3个带值的数据集,我只是想根据用户在菜单栏中选择的内容更新矩形尺寸。非常感谢,MenuBardata1data2data3varw=100,h=100;varcolor=d3.scale.ordinal().range(["#1459D9","#daa520"]);vards1=[[{x:0,y:12}],[{x:0,y:45}]];vards2=[[{x:0,y:72}],[{x:0,y:28}]];v

javascript - 使用 d3.js 进行日期排序

免责声明:我不知道自己在做什么。说真的,我喜欢数据可视化,我认为自己动手做是学习编程和使用数据库以及像酷人一样制作网络应用程序的好方法。我一直在寻找最后一天的答案,我能找到的所有示例都无法使用我的代码。这是我正在使用的完整代码和数据的粘贴箱。这是在d3.jsgithub上找到的示例折线图,其中填充了我的数据。http://pastebin.com/7aW6wegdjson来自couchdb数据库我可以画线,但它们很乱:我认为这是由于日期排序不正确造成的,因为在控制台中它们是乱序列出的。我不知道如何让日期正确排序。使用d3.time.format会抛出错误(您实际上可以在我从示例折线图中

javascript - 在 D3 强制布局中,在根节点周围均匀地间隔节点

我刚刚开始使用D3,所以如果有人对我可能没有正确/优化地做的事情有任何一般性建议,请告诉我:)我正在尝试创建一个力导向图,其中节点围绕中心根节点(以较大的尺寸标注)均匀分布(或足够接近)。这是我尝试实现的布局示例(我知道它不会每次都一样):我有下图:varwidth=$("#theVizness").width(),height=$("#theVizness").height();varcolor=d3.scale.ordinal().range(["#ff0000","#fff000","#ff4900"]);varforce=d3.layout.force().charge(-12

javascript - d3.js 向多线系列图表添加图例

如何向多线系列图表添加图例?我试过了,但没有显示任何图例。这里的block:http://bl.ocks.org/3884955当各种级数收敛到同一点(如零)时存在缺陷。所有标签将相互叠加。无需使用这些标签,传统的图例会很有用。我试过添加这个varlegend=svg.append("g").attr("class","legend").attr("height",100).attr("width",100).attr('transform','translate(-20,50)');legend.selectAll('rect').datum(function(d){return{n

javascript - D3.js : Uncaught TypeError: Cannot read property 'document' of undefined

我在d3.js初始化方面遇到了一个非常奇怪的问题。在d3.js脚本中,一开始它尝试获取vard3_document=this.document;但它弹出以下错误:UncaughtTypeError:Cannotreadproperty'document'ofundefined调试时,this.document返回未定义。我正在使用yowebapp生成项目。它使用bower作为包管理器,并使用gulp进行构建过程(使用babel实现ES2015功能)。有趣的是,我已经用xampp对其进行了测试,它运行良好!我会很感激一些建议!谢谢! 最佳答案

javascript - Google Charts API : new google. visualization.Table() - 未捕获的类型错误:未定义不是函数

我已将Google代码示例复制到一个php脚本中,但是我收到错误“undefinedisnotafunction”它专门发生在这条线上:vartable=newgoogle.visualization.Table(document.getElementById('table_sort_div'));貌似Table函数不存在???我直接从Google的代码示例中复制了代码,所以我无法理解我做错了什么……我倾向于认为该示例存在问题,但我假设我会在谷歌之前犯错?代码直接复制自:http://code.google.com/apis/chart/interactive/docs/example

javascript - 当包含在基于 jQuery 的选项卡中时,Google Chart 加载量非常小

我正在使用Google的linechart几乎与演示完全一样-只有数据发生了变化-在thisjQuerytabplugin内部没有修改。也许有50%的时间,图表将以400x200加载,即使它已被指定为以700x250加载。包含的div将具有适当的宽度和高度,但API呈现的图表将以400x200加载到其中。我怀疑这是因为当API尝试呈现时未显示选项卡。正因为如此,它会尝试以它认为是null的内容进行渲染,从而迫使自己采用最小的默认分辨率。我的想法是,如果图表的显示可以延迟到单击适当的选项卡时,就可以解决问题。可悲的是,我不知道该怎么做,我的研究也没有成果。我能找到的最接近的是thisth