草庐IT

d3-tooltips

全部标签

javascript - 使用 D3.js 的极坐标图

有谁知道使用D3Javascriptlibraries生成极坐标图的好例子吗??我见过一些像this这样的玫瑰图和this,但我真的在寻找更类似于Matlab极坐标图的东西:任何示例将不胜感激。谢谢! 最佳答案 当然,给你:该函数是使用d3.svg.line.radial绘制的.背景径向网格被实现为线、圆和文本元素。一个小烦恼是代码需要弧度(对于d3.svg.line.radial)和度数(对于SVG的transformattribute)。我使用了旋转的文本标签,因为使用SVG很容易做到这一点,但如果您不介意用一点三Angular

javascript - d3js force directed - 在悬停到节点时,突出显示/着色链接节点和链接?

我有具有4种类型的节点和两种类型的链接的力定向图。我将一种类型的节点(蓝色的小节点)用作两个较大节点之间的“连接节点”。在鼠标悬停节点上,它变大了,但我也想用不同的颜色为这个节点的“连接”着色。所以当你将鼠标悬停在一个节点上时...所有链接和小“连接节点”都会变成不同的颜色,这样你就可以知道这个悬停的节点连接到哪个其他更大的节点。你可以通过以下链接查看我的情况:http://jsfiddle.net/2pdxz/例如:如果您将鼠标悬停在Google节点上,带有“connection”节点的指向Yahoo的链接将突出显示,并且指向CDO和CTO突出显示我尝试添加这部分代码:functio

javascript - 在 d3 中拖动后始终抑制单击事件

单击和拖动事件的解耦在之前的一些问题中讨论过,例如thisone通常,建议在点击处理程序中使用if(d3.event.defaultPrevented===false){...}。但是,如果mouseup和mousedown不在同一个元素中,这似乎不起作用(至少在某些浏览器中)。Considerthisjsfiddle(下面的代码)。这是我想要的行为:单击SVG中的任意位置触发单击事件(矩形闪烁),拖动SVG中的任意位置拖动矩形。观察到的行为(Chrome33):如果单击的mousedown在矩形内部,而mouseup在外部,则拖动和单击事件都会触发。如果mousedown和mouse

javascript - D3.json 设置缓存为 false

我注意到使用json调用(d3.json)重绘D3元素不想在IE9+上更新。原因是json调用被缓存,因此浏览器不会在传递新数据时注册。正常jQueryajax调用的解决方法是将其属性设置为缓存:false,全局用于所有ajax调用:$.ajaxSetup({cache:false});但是我如何将它添加到d3.json调用中,因为它使用自己的方法调用ajax?我成功地在路径后添加了当前时间戳:varnoCache=newDate().getTime();d3.json(data+"?_="+noCache)但这样做有点蹩脚……有什么建议可以实现吗?或者更好的是,如何仅在IE运行时设置

javascript - 在 D3 map 上显示工具提示

我使用D3和countriesgeojson创建了一个基本map.这是demo.现在,当用户点击map上的任何坐标时,我会在工具提示中显示天气信息,并以天气图标作为标记。countries=countriesGroup.selectAll("path").data(json.features).enter().append("path").attr("d",path).attr("id",function(d,i){return"country"+d.properties.iso_a3;}).attr("class","country")//addamouseoveractiontos

javascript - D3.js - 以编程方式在 Jasmine 中生成拖动事件

我有一个使用D3和Angular编写的折线图组件。它具有用于更改x轴比例的可拖动条。现在我正在尝试使用Karma/Jasmine测试组件。我在单元测试中无法触发拖动事件。鼠标悬停和单击等其他事件也可以正常触发。我认为这是导致问题的d3中“拖动”事件的综合实现。这是我用来触发拖动的代码(此类代码在测试html页面上触发正确的d3拖动事件,但在单元测试中失败)。varleftBar=element.find(".left-bar")[0];varevObjStart=document.createEvent("MouseEvents");evObjStart.initMouseEvent(

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 - rails + Chartkick : How to change the date format of the tooltip?

我正在以这种方式生成图表(使用GoogleChart):"Solditems",data:@items.group(:created_at).count}],:library=>{hAxis:{title:"Period"},vAxis:{title:"AmountsinUDS"},title:"HistoryOfSales"}%>图表生成得很好,但有一件事我想改变——工具提示看起来像这样:工具提示中的信息是正确的,但我不想显示Oct19,2014,2:00:00AM我只想显示Oct19,2014。有没有办法用Chartkick做到这一点?非常感谢您的宝贵时间。