草庐IT

d3dtexture

全部标签

javascript - 结合 angularJS 和 d3.js : Refreshing a plot after submitting new input parameters

我希望在单击输入字段中包含新值的提交按钮后,我的网络d3.js绘图将根据生成的新图进行更新通过新输入值。在下面,您可以找到我的示例代码:GenerateGraph.js该文件包含一系列函数,可根据提交输入值。然后需要在浏览器中刷新图形。functiondegree(node,list){vardeg=newArray();for(vari=0;inetwork.html!DOCTYPEhtml>graphSimulatinganetwork//gettheinputparametersforplottingangular.module("myApp",[]).directive('ne

javascript - 在 d3.js 中从一个圆圈画一条线到另一个圆圈

我将解释我在实际项目中遇到的问题。我正在使用Web服务,这会返回n个点x、y。我正在使用settimeout模拟Web服务。我想在这些坐标中放一个圆圈,我想为每个圆圈画一条连接它们的线。像这样:我想在圆圈之间添加一条线,但要显示动画。像这样:http://bl.ocks.org/duopixel/4063326例如这个动画,但是一点一点当我运行我的应用程序时,我希望该行具有从初始圆圈到结束的动画。如果我添加一个新圆圈,我想创建一条线并为圆圈添加动画。我该怎么做?http://jsfiddle.net/2rv0o8da/varsvg=d3.select('svg');vardataSet

javascript - 使d3强制静态布局更快

我是新来的d3js.我渲染了一个约10000个节点的图表。我使用了webworker和静态强制渲染(因为普通渲染的成本是webworker的两倍多)。//jsvarnodes=d3.range(10000).map(function(i){return{index:i};});当range为10000时,会耗时将近20秒,在console可以看到,那么如何减少这个时间呢?jsfiddle 最佳答案 您要修改alpha衰减率,它控制力模拟冷却的速度:Thealphadecayratedetermineshowquicklythecur

javascript - 在 d3.js 中从 csv 创建层次结构

我有一个包含以下数据的csv:world,country,stateWorld,US,CAWorld,US,NJWorld,INDIA,ORWorld,INDIA,APWorld,INDIA,TN我需要转换成如下所示的树层次结构:{"name":"World","children":[{"name":"US","children":[{"name":"CA"},{"name":"NJ"}]},{"name":"INDIA","children":[{"name":"OR"},{"name":"TN"},{"name":"AP"}]}]};然后这棵树将用于树可视化。有人可以帮忙吗?

javascript - 将 Handlebars 与 D3.js 结合使用

我有一个Handlebar模板,我想将d3生成的svg图形包含到该模板中。图形应该在模板内D3图vardataset=[1200,3000,3200];//datasetwillchangedynamically.varw=154;varh=42;varrect_1_h=5;varrect_2_h=rect_1_h*2;varrect_2_w=rect_1_h/2;varrect_1_color="#A1C9D9";varrect_2_color="#999999";vartext_color="#555555";varfont_size=18;varfont_family="Sego

javascript - 使用 d3.js 复制 neo4j 浏览器可视化

我想为我的neo4j数据创建一些可视化效果,并且在与其捆绑的浏览器中使用了一些非常好的设置,但是使用d3时似乎不太容易模拟-我的设置基于Neo4j可视化指南位于http://neo4j.com/developer/guide-data-visualization/但本指南并不能真正让您了解浏览器所达到的水平。例如,我要模拟:节点之间的多条曲线路径结束于节点边缘而不是中心的路径图表在静态位置初始化(尽管可能只是隐藏直到d3可能触发某个事件)我还没有看到任何正式的CSS/JS版本获得相同的效果,所以我猜想用户会从头开始编写代码。是否有任何其他选择可以快速实现这一目标?非常感谢

javascript - d3 刻度轴两侧的刻度线

我试图让刻度线显示在y轴的两侧。正如下面的代码所示,我可以根据长度-width来扩展刻度线,它从一个起点从左到右绘制刻度线。是否可以将刻度线的起点进一步向左移动?我的意图是美观,但让刻度值直接在刻度线的长度上。我设置了一个网格,由容器长度的刻度线组成://AxisvarxAxis=d3.svg.axis().scale(x).orient("bottom").tickSize(-height);varyAxis=d3.svg.axis().scale(y).orient("left").tickSize(-width).tickFormat(d3.format("s"));基于这些量表

javascript - D3 v4 获取元素的翻译值

这个问题在这里已经有了答案:Howcand3.transformbeusedind3v4?(6个答案)关闭6年前。当我在一个元素上运行d3.select(this).attr("transform")时,我得到一个响应translate(20.00,778)。但是我需要获取翻译的各个值。在v3中,可以使用vart=d3.transform(element.attr("transform"));t.translate;但是d3.transform在v4中不可用。如何达到同等效果?

javascript - D3 : zoom to bounding box with d3-tiles

我已经成功地将D3(矢量)map分层放置在从Mapbox中提取图block的d3-tile(光栅)map之上。手动缩放效果完美,矢量和光栅同步。我现在正在尝试实现MikeBostock'zoom-to-bounding-box'功能,应用程序可在用户单击时放大所需的国家/地区。我想我快到了,但现在似乎不匹配,可以这么说,map缩小到外太空。我在这个jsfiddle中重现了这个问题.我需要在“缩放”功能中进行哪些修改才能使map按预期正确缩放?我认为这就是问题所在:vector.selectAll("path").attr("transform","translate("+[transf

javascript - 在 native react 中绘制 d3 轴

我想用axis=d3.axisLeft(scale)在Shape组件中如果未设置渲染上下文,d3-shape中的形状组件返回路径是很常见的,React-Native中就是这种情况有可能以某种方式获得对react节点上下文的访问权限吗?路径不是一个可行的选择,因为轴将是一组项目,而不是路径 最佳答案 我一直在研究这个——我的理解是不可能一起使用d3轴和react-nativeARTShapes。您可以将d3-shape与ARTShapes一起使用,因为d3-shape函数返回由ARTShape解释的字符串。这些字符串在这里得到了很好的