草庐IT

javascript - 使用D3.js创建人口金字塔

我需要使用D3.js创建一个看起来很经典的人口金字塔。与此图片相似:我发现了一些看起来非常不错的示例(this和this),但是它们比我要查找的要复杂得多。有谁知道我可以看的一个简单的简单示例?对开始这个有什么建议吗?我是否应该仅制作两个彼此相邻的条形图,每个性别组一个? 最佳答案 进行这样的可视化的关键是要花很多时间预先设置布局,然后再绘制任何东西。当需要为图表制作刻度和坐标轴时,您将需要使用一些关键度量来使您的生活变得更加轻松。然后,您可以将元素与翻译一起使用,以便在图表的每个“部分”中都可以在本地坐标下工作。目标是创建两个像这

javascript - 使用 d3.js 设置饼图颜色

我在使用d3.pieChart设置饼图切片颜色时遇到问题。我看到的文档和示例将颜色方法与十六进制颜色数组结合使用。但是,设置此结果会导致我的饼图变成白色(不可见),而图例中的每个项目都变成黑色。我已经尝试将.colors与五色数组和六色数组一起使用,但问题仍然存在。这可能是由于slicesCap的某些问题造成的吗?下面的代码片段,但category10令我眼花缭乱,所以任何有关实现自定义颜色集的建议都将不胜感激!pie.slicesCap(5).legend(dc.legend().gap(3)).colors(d3.scale.category10())

javascript - 具有固定布局的 d3.js 绘图网络

我目前正在处理由我的前任编写的批处理脚本的可视化结构,它只是从某处重复SELECT和INSERT到某处。我尝试使用树函数,但当我希望将JSON的相同索引中的相同名称识别为相同节点时,使用起来并不灵活。所以我决定使用强制布局功能,并且在谷歌搜索的帮助下几乎完成了。然而,虽然我可以在同一区域映射同一组数据库或脚本来初始化部分,但不知何故force.on("tick",function()~~重新计算每个节点之间的距离然后它变得非常困惑。但没有这个,它不会显示节点之间的链接。有谁知道如何在使用JSON重新计算链接时固定布局。我的代码是这样的:node.append("circle").att

javascript - 为什么 translate3d 会泄漏 DOM 节点?

考虑这个HTML页面:http://jsbin.com/aYUcelo/1/(我建议下载它以摆脱所有jsbin噪音)。点击GO按钮,一个div被添加到正文中。RM删除其中一个div。它还将两种样式之一应用于新的div:newDiv.style.color="red";//ornewDiv.style.WebkitTransform="translate3d(0px,0px,0px)";可以看到chromedevtoolsmemorytimeline中的节点数量不断增加,如果应用了WebkitTransform,GC无法移除。红色样式不会发生这种情况。编辑:只是为了明确应用“红色样式”添

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内的矩形选择。单击以选择某些元素。缩放和平移