草庐IT

javascript - d3.forcesimulation() 链接距离

我在堆栈中查看了不同的链接距离,似乎为了改变链接距离,您需要实现一个函数,然后传递该函数以动态分配链接距离:functionlinkDistance(d){returnd.distance;}然后我认为我可以传递给svg,但返回函数错误而不是现有的linkdistance或distancevarlink=svg.selectAll(".link").data(bilinks).enter().append("path").style("stroke","#6b7071")//gunmetalgreylink.attr("class","link").linkDistance(linkD

javascript - v4 中的 d3 缩放功能问题

我在使用v4时遇到D3中的缩放功能问题。它抛出一个错误,指出zoom.translate未定义。我主要使用此答案中的以下代码d3focusonnodeonclick,这对v3非常有效。但是,由于我在使用v3时遇到问题,因为它对源和节点采用字符串形式(而不是索引)的数据有限制D3JSONfilewithsourceandindexasstringsratherthanindices,我切换到v4..linksline{stroke:#999;stroke-opacity:0.6;}.nodescircle{stroke:#fff;stroke-width:1.5px;}varsvg=d3

javascript - 在缩放/拖动时缩放/重绘 d3.js 网格线

我昨天才开始使用d3.js,但在完成我的工作时遇到了一些麻烦。现在我创建了一个带有两个y轴的图表,每个显示一些值,x轴显示日期。点击y轴上的值,我会显示相应的水平网格线。我的问题是,在放大或缩小或拖动时,网格线(水平和垂直)无法根据轴值正确缩放,它们根本就不动。我今天下午进行了很多搜索,找到了一些如何执行此操作的示例,但它们似乎都不适用于我已有的代码。我想,应该将逻辑添加到缩放行为中,但我不确定//xaxisgridlinesfunctionmake_x_gridlines(){returnd3.axisBottom(x).ticks(5)}//addtheXgridlinesletx

javascript - d3.js 在悬停时传递多个函数

我使用教程在鼠标悬停时获得此功能:functionarcTween(outerRadius,delay){returnfunction(){d3.select(this).transition().delay(delay).attrTween("d",function(d){vari=d3.interpolate(d.outerRadius,outerRadius);returnfunction(t){d.outerRadius=i(t);returnarc(d);};});};}然后我以这种方式将其添加到饼图的各个部分:.on("mouseover",arcTween(outerRa

javascript - 升级到 Angular 8 后 d3.js 运行时错误

我正在尝试将我的Angular6应用程序升级到Angular8。我的代码可以编译,但我立即收到运行时错误“d3.js:8UncaughtTypeError:Cannotreadproperty'document'ofundefined”。d3.js中失败的行是vard3_document=this.document;。这让我相信Angular8正在严格模式下运行d3.js。我有最新版本的d3节点模块("d3":"3.5.17"),它显然不支持严格模式;我的理解是“this”应该引用窗口​​对象,但这在严格模式下不起作用。我知道Angular8现在使用dart-sass而不是node-s

javascript - 使用 d3.js 和给定的 json 文件结构进行捆绑布局

我有一个包含如下元素的json文件:[{"name":"ManuelJose","ttags":["vivant","designer","artista","empreendedor"]}]我正在尝试使用此结构获取节点和边来完成如下图:(图取自d3.jsdocumentation)我的json文件中的name和ttags都是指节点,ttags实际上是节点与其他节点之间的链接。但是,我不明白如何使用这个库d3和更高版本的json文件来创建这个图表。d3.json("/data/tedxufrj.json",function(classes){varnodes=cluster.nodes

javascript - 如何使用 d3.js 创建水平图例

我一直在尝试使用d3.js为我的图表创建水平图例。我一直在努力使动态标签的x轴间距正确。问题是标签的宽度不一致,这里是fullexample这是我计算x位置的函数:functionlegendXPosition(data,position,avgFontWidth){if(position==0){return0;}else{varxPostiion=0;for(i=0;i有人对如何改进这个有什么建议吗? 最佳答案 我建议引用这个问题:SVGgettextelementwidth照原样渲染第一个图例条目。存储此条目,或分配ID,以便

javascript - D3.js 不工作的非常简单的教程示例

我是D3.js的新手。我正在阅读MikeDewar的D3入门。我尝试了书中的第一个例子,但它不起作用。我一直在为此撕心裂肺。我这里的代码有什么问题?在部分:functiondraw(data){"usestrict";d3.select("body").append("ul").selectAll("li").data(data).enter().append("li").text(function(d){returnd.name+":"+d.status;});}在:d3.json("flare.json",draw);和JSON文件:[{"status":["GOODSERVICE

javascript - 我如何使用 D3.js 获取一组 Javascript 对象,并在折线图中使用它们?

我正在处理的Web应用程序有一个REST接口(interface),该接口(interface)返回类似于此的对象数组:[{"id":110,"time":1360580745797,"userName":"pinky","activity":"respawn"},{"id":111,"time":1360580745797,"userName":"perky","activity":"changedirection"},{"id":112,"time":1360580745797,"userName":"clyde","activity":"caughtpacman"},{"id":

javascript - 在 D3.js 中显示来自多维数组的数据

我正在尝试使用d3显示来自多维数组的数据。使用下面的代码,浏览器中不会出现任何内容。检查元素显示每个数组中每个元素的文本都存在,但它们只是没有出现在页面上。但是,当我删除下面已注释的行时,我得到以下示例输出:1,3,3,5,6,73,5,8,3,2,69,0,6,3,6,3etc...如何修改代码以便显示如下内容:133567358326etc...代码:vardataset=[[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]];varsvg=d3.select("body").append("s