草庐IT

d3dtexture

全部标签

javascript - zoom.scaleExtent() 在 d3.js 中做了什么?

我已经创建了d3时间轴,//minDateandmaxDatesarejavascriptdateobject.vartimeScale=d3.scaleTime().domain([minDate,maxDate]).range([0,width]);vartimeAxis=d3.axisBottom(timeScale);我已经在这个轴上添加了缩放交互//gXisgroupdivthathastimeAxis.gX.call(d3.zoom(timeScale).scaleExtent([0,4]).on("zoom",function(d){//Dosomething.}))但最

javascript - d3js 围绕饼图重新分配标签

我正在使用d3.js创建一个在外面带有标签的圆环图。我使用基于饼图每个切片的质心的三Angular函数来定位标签。g.append("g").attr("class","percentage").append("text").attr("transform",function(d){varc=arc.centroid(d);varx=c[0];vary=c[1];varh=Math.sqrt(x*x+y*y);return"translate("+(x/h*obj.labelRadius)+','+(y/h*obj.labelRadius)+")";}).attr("dy",".4em

javascript - d3.js - 以缩写形式在轴上显示大数字

有没有办法在d3.js轴上缩写大数字?我记得在网上看到一个辅助方法,但找不到了。我想缩写大数字以减少图表边距并使其更易于阅读。即1,000,000=1M等如果有人可以发布指向d3.js帮助器类的链接,我们将不胜感激。 最佳答案 查看此链接https://bl.ocks.org/mbostock/9764126这对我适用于d3v4:functionmake_y_gridlines(){returnd3.axisLeft(yScale).ticks(10,"s")} 关于javascript

javascript - 使用 SVG 和 d3.js 创建滚动条

现在我已经使用d3创建了几个“框”,它们只是带有文本的SVG矩形:varcanvas=d3.select("body").append("svg").attr("width",800).attr("height",500);//specifiesdrawingareaforeachboxvarboxes=canvas.selectAll("rect").data(classData).enter();boxes.append("rect").attr("width",boxWidth).attr("height",boxHeight).attr("fill",boxColor).att

javascript - 使用 Dagre d3 缩放后重新渲染 HTML

编辑我找到了一个涉及使用稍旧版本的dagre-d3库(4.11)的解决方案。如果有人能找到最新版本的问题,那也会有所帮助。谢谢我正在使用Dagred3绘制一些图表。当我最初渲染我的图表时,我会这样做g=newdagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function(){return{};});varsvg=d3.select("svg"),inner=svg.select("g");svgGroup=svg.append("g");varrender=newdagreD3.render();render(d3.

javascript - Accessibility: d3 brush/zoom 可以获得焦点并用键盘控制

关于如何使用键盘控制d3笔刷/缩放的任何提示:1.专注笔刷控制能力2.能够使用键盘改变笔刷区域是否支持开箱即用?更新:显然没有开箱即用的解决方案(希望d3会在某个时候提供)。这意味着自定义解决方案将取决于可视化/场景。发布实际的用户体验和要求,并将针对此特定案例提供解决方案。为了满足可访问性要求,任务是修改下面的图表控件,以便能够使用键盘进行缩放/画笔。这包括:1)能够设置焦点;2)能够使用左右箭头键进行控制。 最佳答案 我要用这个bl.ock作为引用。我相信这是您图像的来源。缩放和画笔功能比较我们对这个block中的一些东西感兴趣

javascript - D3 气泡示例 : What does bubble. nodes() 做什么?

示例:http://mbostock.github.com/d3/ex/bubble.html我很难理解第16行发生了什么:.data(bubble.nodes(classes(json))为什么,或者在classes()函数中,变量classes[]获得为其每个对象定义的x、y、r值。另外,bubble.nodes()似乎不是一个实际的函数?如果我添加一个console.log(classes)在第44行和第45行之间-内部的每个对象似乎都已经填充了x,y,r-但不清楚为什么会发生这种情况。 最佳答案 对bubble.nodes(

javascript - D3 物理重力

我正在尝试使用D3库设计一个物理重力模拟,但运气不佳。'layout'APIreference声明物理重力可以通过正“电荷”参数实现,但我不确定这将如何工作。我现在尝试实现的是一个SVG元素,它包含多个可变权重和大小的矩形,它们以不同的速度上升,最终离开视口(viewport)——它们的权重将定义它们上升的速度.(基本上,我只是想在视口(viewport)顶部之外实现全局引力。)按照D3的兵力布局,有没有可行的办法呢?我只是在寻找概念性的解决方案,但也欢迎示例和代码片段。提前致谢! 最佳答案 这里有几个想法:您可以直接在tick事件

javascript - 展平使用 d3.js 嵌套创建的对象层次结构

我正在尝试以如下方式可视化团队协作数据:图表中的不同颜色表示不同的协作工件类型。来自源的数据如下所示:varjson=[{"teamLabel":"Team1","created_date":"2013-01-09","typeLabel":"Email""count":"5"},{"teamLabel":"Team1","created_date":"2013-01-10","typeLabel":"Email""count":"7"},/*andofcourse,alotmoredataofthiskind*/]请注意,数据是针对单日给出的。所以对于上面的可视化,我需要首先根据一年

javascript - 为什么在使用 d3 创建 AngularJS 指令时使用 element[0] 而不是 element?

在使用D3创建指令时,似乎必须使用element[0],例如,如下所示:app.directive('firstTry',function(){functionlink(scope,element,attrs){varsampleSVG=d3.select(element[0])...那么,为什么是element[0]而不是element?element的名称表明它是单个对象而不是数组,但显然事实并非如此。另一个问题:这个元素还有什么?顺便说一句,关于此事的任何官方引用资料都会有很大帮助。非常感谢。 最佳答案 Directivest