草庐IT

javascript - 显示具有多个父节点的 D3 树

我目前有this图已实现,我希望在描述具有多个父节点的子节点时保持结构和可折叠性。有没有办法做到这一点?我查看了力图,但我也想保留一组层次结构(这意味着1级的parent可以有一个child和3级显示)。经过大量研究和修改我当前的代码后,我无法解决我的问题。有没有人有显示具有多个父节点的D3树节点的经验? 最佳答案 以防万一有人想知道我做了什么来回答我的问题。我最终使力图的行为方式与树相同。这为我提供了拥有多个父级的可能性,我只需要对图表如何使用力进行一些调整以保持层次结构。 关于jav

javascript - 使用 View 框时如何阻止路径在 D3 中模糊/消失?

我正在使用D3库创建一些图表。它们被放置在一个View框中(参见下面“输出”下的片段)。View框允许响应式缩放。但是在某些分辨率下,线条要么消失,要么模糊/变粗。我认为这与它在这些分辨率下像素不完美有关,但我可能是错的。没有添加额外的样式,除了shape-rendering:crispEdges;JSthis.y=d3.scale.linear().rangeRound([this.height,0]);this.yAxis=d3.svg.axis().scale(this.y).tickSize(this.width).tickValues([0,25,50,75,100]).ti

javascript - d3月度数据集-更新数据-添加新组

我正在研究个人财务的可视化,以学习d3,感觉像是一个有用的项目。我已经设法按照我的意愿制作每个月的图表(每天+或减去)。现在我希望能够从一个月更改为下一个月。如果旧月份(更新前)的天数(又名数据点)比新月份(更新后)多,则此方法有效。如果旧数据点少于新数据点,则会在图表顶部添加额外的数据点。我将条形图中的每个数据点作为一个组添加(条形图本身、数据标签+日期标签)。我正在为每个新的一天向下翻译整个小组。我需要弄清楚的是,更新后我的数据点是多了还是少了,如果少了,我需要向下翻译新的数据点。你知道我的意思?这是我最初添加条形图的代码:bar=chart.selectAll("g").data

javascript - 映射整数范围的最佳 d3 比例

我想构建一个比例尺,将一系列连续整数(字符串中字符的索引)映射到另一个整数范围(像素,比如0-600)中的规则间隔。也就是说,我想尽可能有规律地将字符分配给像素,反之亦然,一个字符的长度不一定是另一个的倍数。例如,我希望将[0,1,2,3]映射到400像素0->0-991->100-1992->200-2993->300-399反之0-99->0100-199->1200-299->2300-399->3虽然对于0-4000到400像素的映射,我希望0-9->010-19->1etc.d3中对此使用的最佳比例是多少?一方面,如果元素数量很大,我担心离散尺度不会使用域被等分的事实并生成巨

javascript - d3.js:放大点击事件

我试图获得相同的行为WilLinssen'simplementation但在d3.js版本4上。我对版本4中的zoomapi很困惑。我在原始实现中所做的更改是:zoom.translate()替换为d3.zoomTransform(selection.node())并添加了适当的点:svg.attr("transform","translate("+t.x+","+t.y+")"+"scale("+t.k+")");这个:zoom.scale(iScale(t)).translate(iTranslate(t));替换为varfoo=iTranslate(t);zoom.transla

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