草庐IT

D3Blocks

全部标签

javascript - d3 : Make a static directed graph

我想在d3中可视化一个20K节点的依赖关系图。力导向图,例如http://bl.ocks.org/mbostock/1153292对于这个数量的节点,在浏览器中呈现太慢。基本上我想表示节点包含文本和从一个节点到另一个节点的有向边,并添加缩放和平移功能。我怎样才能在d3中做到这一点? 最佳答案 这里有一个替代方案,它似乎没有使用强制来布置节点-没有弹跳,性能良好,并且内置了上传/下载工具。它的许可证是MIT/X:Interactivetoolforcreatingdirectedgraphsusingd3.jsdirected-gra

javascript - d3 js 分层边缘捆绑数据格式

我正在尝试使用分层边缘捆绑将url可视化为targetURL。这些列之间需要什么类型的关系?这里是thesample:这是我的code.我遇到了一个错误TypeError:node.parent.childrenisundefined 最佳答案 如BundleLayout的文档中所述,布局应用于links数组,每个链接都有一个source和target属性指向两端的节点链接。此外,这两个节点都需要一个指向层次结构中父节点的parent属性。此数据(理想情况下)来自ClusterLayout,它在链接捆绑之前定位节点。集群布局将生成捆

javascript - D3v4 : d3. timeParse 失败,UNIX 纪元秒 (%s)

我的数据集包含UNIX时间戳,例如“1509392160”。我似乎无法使用返回null的d3.timeParse("%s")来解析它们。用d3.timeFormat检查反向过程也让我失败了。官方示例和所有其他格式字符串都有效:varformatTime=d3.timeFormat("%B%d,%Y");formatTime(newDate);//->"June30,2015"但是,格式化为UNIX(毫秒)秒只会为“%s”和“%Q”返回“s”或“Q”:varformatTime=d3.timeFormat("%s");formatTime(newDate);//->"s"顺便说一句,使用

javascript - d3.js:如何使用 map 功能?

如何使用d3.map()从以下数组中获取[10,12]?varmydata=[{'__data__':10},{'__data__':12}];我一直在尝试这个,但它不起作用:varmymap=d3.map(mydata,function(d){returnd.__data__;}); 最佳答案 你不能——d3.map()不是用于跨数组映射函数,而是用于散列的垫片。简而言之,虽然对象可以像散列一样使用,但在某些情况下可能会发生意外行为。一个新的Javascript标准提出了一个解决方案,在它被实现之前,d3.map()可以用来达到同

javascript - 使用 D3.js 在矩形上显示文本

我正在使用d3.js开发规范化堆叠条形图,并尝试在矩形上附加文本。当我在浏览器中检查时它会被附加。但它不可见。我想要这样的东西,这是我的代码,varmargin={top:20,right:100,bottom:30,left:40},width=400-margin.left-margin.right,height=200-margin.top-margin.bottom;varx=d3.scale.ordinal().rangeRoundBands([0,width],.11);vary=d3.scale.linear().rangeRound([height,0]);varcol

javascript - 使用 AQL(或 arangojs)从 ArangoDB 获取 d3 数据

我正在构建一个基于d3力导向图并在后端使用ArangoDB的应用程序,我希望能够尽可能高效地从Arango动态加载节点和链接数据。我不是d3方面的专家,但总的来说力布局似乎希望将其数据作为节点数组和链接数组,这些节点对象作为其源和目标,如下所示:varnodes=[{id:0,reflexive:false},{id:1,reflexive:true},{id:2,reflexive:false}],links=[{source:nodes[0],target:nodes[1],left:false,right:true},{source:nodes[1],target:nodes[2

javascript - 使用 D3 在 map 上绘制点

我正在尝试使用基于纬度和经度的D3地理库在map上绘制几个点。但是,当我将这些值传递到我的投影函数时,它会导致坐标超出我的SVG图像的范围。我的代码基于thisexampleprovidedinthedocumentation.我已将当前代码放在:http://bl.ocks.org/rpowelll/8312317我的源数据是一个简单的对象数组,格式如下varplaces=[{name:"Wollongong,Australia",location:{latitude:-34.42507,longitude:150.89315}},{name:"Newcastle,Australia

javascript - d3-js 的 Force-Directed Layout 是否支持图像作为节点?

d3有ademoofaForce-DirectedGraphLayout.我希望图中的所有节点都是图像,而不是圆圈。所以,我变了.append("svg:circle").attr("class","node").attr("cx",function(d){returnd.x;}).attr("cy",function(d){returnd.y;}).attr("r",5).style("fill",function(d){returnfill(d.group);}).call(force.drag);到.append("xhtml:img").attr("src","http://a

javascript - D3 : Grayscale image display driven by 2D array data

有人知道如何使用d3显示灰度图像,即像素强度的二维数组吗?我似乎无法在任何地方找到它的任何例子,它会很棘手吗?任何帮助/链接/指针表示赞赏! 最佳答案 如果只想显示图像,请使用imageelement和“xlink:href”属性。例如:svg.append("image").attr("xlink:href","my.png").attr("width",960).attr("height",500);如果你想给灰度图像上色,请看这个colorizedheightmapexample它使用分位数来创建发散色标,并使用HCL插值来获

javascript - d3.js 如何在使用 nice() 时获取比例域的最小值

我有一个散点图,我试图在其中绘制一个应该直接出现在x轴上的引用点,但我正在像这样创建y轴://giveourselvessomespaceyMin=yMin*0.9;yMax=yMax*1.1;//setupyvaryValue=function(d){returnd.price;},yScale=d3.scale.linear().domain([yMin,yMax]).range([height,0]).nice(),yAxis=d3.svg.axis().scale(yScale).orient("left");问题是我想直接在x轴上绘制引用点。如果我不使用.nice(),我可以