草庐IT

javascript - 如何使用 d3 v4 设置固定链接距离

所有API示例似乎仍然适用于v3。我试图了解如何创建具有固定距离链接的力图,例如:http://bl.ocks.org/d3noob/5141278我查看了link_distance但不确定如何应用它:https://github.com/d3/d3-force/blob/master/README.md#link_distance创建这样的图表:letsimulation=d3.forceSimulation().force("link",d3.forceLink().id(function(d){returnd.id;})).force("charge",d3.forceManyB

javascript - d3 时间刻度 x 轴与 unix 时间戳

使用d3js格式化此时间序列图表的x轴时遇到问题。这是一个工作示例:http://tributary.io/inlet/7798421问题:我只能在x轴上看到1个日期(标签),无论指定的刻度总数如何。如何在x轴上以4-6个刻度显示时间?编辑:下面感谢Lars的解决方案。这是我在UTC的时间:vardata=[{"time":1387212120,"open":368,"close":275,"high":380,"low":158},{"time":1387212130,"open":330,"close":350,"high":389,"low":310},{"time":13872

javascript - D3js 如何在 .enter 上下文中追加 2 个相同级别的 child

这个问题在这里已经有了答案:Canenter()selectionbereusedafterappend/insert?(1个回答)关闭6年前。我在尝试在.enter()上下文中将一个圆圈和一个文本放入一个组(同一级别,而不是彼此内部)时遇到问题varcategorized=g1.selectAll("g.node").data(dataset,function(d){returnd.id})categorized.enter().append("g").attr("id",function(d,i){returnd.id;});categorized.enter().append("

javascript - 用渐变颜色绘制一个 D3 圆

如何画一个渐变色的圆?比如,从黄色到蓝色的渐变。通常,要创建一个黄色的圆圈,我们可以使用以下代码:varcdata=[50,40];varxscale=40;varxspace=50;varyscale=70;varsvg=d3.select("body").append("svg").attr("width",1600).attr("height",1600);varcircle=svg.selectAll("circle").data(cdata).enter().append("circle");varcircleattr=circle.attr("cx",function(d)

javascript - 如何从 D3 v5 中的 CSV 文件加载数据

我正在尝试从D3中的CSV文件加载数据;我有这段代码:functionupdate(error,data){if(error!==null){alert("Couldn'tloadthedataset!");}else{//dosomething};functionchangeData(){d3.csv("data/dataset.csv",update);}如果我使用D3v4它工作正常,但如果我切换到v5它就不再工作了。有人可以向我解释如何修改代码以使其适用于D3v5吗? 最佳答案 d3v5使用fetchAPI并返回需要以下代码的

javascript - D3 Sankey 图中链接的梯度

Here是Sankey图的jsfiddle:我正在尝试修改链接的颜色,以便每个链接的颜色实际上是从其源节点颜色到其目标节点颜色的渐变。(假设不透明度将保持0.2或0.5,具体取决于鼠标是否悬停在链接上;因此链接将保持比节点“浅”一点)我看了这个不错的,很有启发性的example,它绘制了这个渐变填充循环:但是,我根本无法将该解决方案集成到我的解决方案中,它对于给定的任务来说看起来太复杂了。另请注意,原始Sankey图中的链接会在节点被拖动时移动,并且即使在这些过渡状态下也必须显示渐变。一个小问题是链接和节点的透明度以及绘制顺序。我将不胜感激想法和提示。 最佳

javascript - d3.js 指定 x 轴的文本

我的x轴当前有编号的刻度。我希望用我的对象中的数据替换刻度(特别是关键字值)。我将如何做到这一点?IhaveaworkingFiddlevardataset=[{"keyword":"paydayloans","global":1400000,"local":673000,"cpc":"14.11"},{"keyword":"titleloans","global":165000,"local":160000,"cpc":"12.53"},{"keyword":"personalloans","global":550000,"local":301000,"cpc":"6.14"},{"

javascript - D3.js - 为什么为每个子元素触发鼠标悬停和鼠标移开?

我使用d3.js生成一个svg圆圈,圆圈中间有一个文本Logo。这是svg结果。Themovietitle这是d3.jsvarcircles=[{r:innerRadius}];svg.append("g").attr("id","main");svg.select("#main").selectAll("circle").data(circles).enter().append("circle").attr("r",function(d){returnd.r}).attr("fill","#F0E8D0");svg.select("#main").append("text").att

javascript - d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时,如何将光标设置为手?

我已经使用d3.js在SVG容器上绘制了一些圆圈。我已经成功地在这些圆圈上设置了鼠标悬停行为以打印简单的控制台消息。我在鼠标悬停(和鼠标移出)时看到这些控制台消息,所以我知道它们工作正常。但是,我不想打印控制台消息,而是想在将鼠标悬停在上面时将光标更改为手,并且在鼠标移开时将光标更改回正常的箭头。鉴于我的代码如下,我该怎么做?在鼠标悬停时,我知道我需要将样式属性cursor更改为pointer,在mouseout时,我知道我需要将其更改为default但我不知道我应该怎么做的语法。有人可以向我解释一下吗?下面是我的代码。varmyCircle=svgContainer.selectAl

javascript - 使用 Crossfilter 和 D3 重绘直方图

我正在调整Crossfilter库可视化我从Olympics收集的一些推文.我试图通过两种方式从本质上扩展初始示例:我不想显示基于原始数据集的航类列表,而是想显示另一个数据集中的项目列表,该数据集以交叉过滤器当前选择的项目为键。在不同数据源之间切换并重新加载直方图和表格。我已经让第(1)部分按计划工作了。但是,第(2)部分给我带来了一些麻烦。我目前正在通过选择要显示的新“运动”或选择新的摘要算法来更改数据集。在切换其中任何一个时,我认为我应该首先删除以前创建和显示的过滤器、图表和列表,然后重新加载新数据。但是,作为前端可视化的新手,尤其是D3和Crossfilter,我还没有想出如何做