程序设计 d3.js

3

我正在阅读D3.js文档，发现很难从文档中理解该selection.data方法。这是文档中给出的示例代码： var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var tr = d3.select("body").append("table").selectAll("tr") .data(matrix) .enter().append("tr"); var td = tr.selectAll("td") .data(function(d) { return d; }) .enter().append("td") .text(function(d) { return d; }); 我了解其中的大部分内容，但是声明的这一.data(function(d) { return …

75 javascript d3.js html-table

2

Uncaught TypeError：无法读取未定义的属性“ linear”

我是D3的新手，并且在演示脚本中遇到以下错误- FirstD3.jsp：31未捕获的TypeError：无法读取未定义的属性“ linear” 我的演示代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Linear Scales</title> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> var dataset = [ [ 5, 20 ], [ 460, 90 ], [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 …

74 d3.js

2

D3将文本附加到SVG矩形

我正在将html附加到D3中的矩形上，以提供多行工具提示。底部是如何添加矩形，这可能是问题的一部分。最重要的是应该在我的世界中工作的代码。 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>"); 确实会将文本字段插入SVG，但不会显示： HTML： <rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red"> <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea> </rect> 我有一个鼠标悬停在运行以下功能： newRect = svg.append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); 我认为我应该这样做，但是不起作用。它只是删除了我要附加的g.node。 newRect = …

73 javascript svg d3.js

1

在D3力向图中突出显示选定的节点，其链接及其子级

我正在D3中制作力导向图。我想通过将所有其他节点和链接设置为较低的不透明度来突出显示mouseover'd节点，其链接及其子节点。在本例中，http://jsfiddle.net/xReHA/，我能够淡出所有链接和节点，然后淡入连接的链接，但是到目前为止，我还不能优雅地淡入是当前鼠标悬停节点的子节点的已连接节点。这是代码中的关键功能： function fade(opacity) { return function(d, i) { //fade all elements svg.selectAll("circle, line").style("opacity", opacity); var associated_links = svg.selectAll("line").filter(function(d) { return d.source.index == i || d.target.index == i; }).each(function(dLink, iLink) { //unfade links and nodes connected to the current node d3.select(this).style("opacity", 1); //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call …

70 javascript d3.js highlight force-layout chord

2

JavaScript中的x> = x模式

在阅读D3.js的源代码时，我看到了x >= x模式。如果用于检测数字中的NaN，为什么不只是isNaN(x)或x == x？来源，我遇到的地方： d3.min = function(array, f) { var i = -1, n = array.length, a, b; if (arguments.length === 1) { while (++i < n) if ((b = array[i]) != null && b >= b) { a = b; break; } while (++i < n) if …

70 javascript d3.js coding-style nan

1

如何删除D3.js中的属性？

我可以在D3.JS中删除属性吗？我已经使用添加了它.attr("disabled", "disabled")，现在我正在寻找类似于jQuery的东西来.removeAttr("disabled", "disabled");再次将其删除。对<button>和有用<option>。我试过使用，.remove()但是会删除整个对象而不是属性。

70 javascript dom attributes d3.js

6

使用D3.js（IE，Safari和Chrome）创建SVG后，如何保存/导出SVG文件？

我目前有一个使用D3的网站，我希望用户可以选择将SVG保存为SVG文件。我正在使用crowbar.js来执行此操作，但它仅适用于chrome。Safari没有任何反应，IE拒绝了click()crowbar.js中用于下载文件的方法的访问。 var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); 如何在我的网站上以safari，IE和chrome下载基于SVG元素的SVG文件？

69 javascript jquery svg d3.js

3

用D3生成“实时”图形

我最近开始学习使用D3.js框架，尽管看起来它是按照我想要的方式设计的，但我找不到“实时”更新图的简单示例。我正在寻找折线图之类的东西，随着新数据的出现而更新。通过使用“最后看到的”时间戳打json URL或其他一些AJAX-y方法，可以获得新数据。编辑：答案的D3部分在这里： http://bost.ocks.org/mike/path/ 现在，人们如何建议将新数据从服务器发送到客户端？

68 d3.js

2

在D3强制定向布局中修复节点位置

我希望力导向布局中的某些节点忽略所有力，并基于该节点的属性停留在固定位置，同时仍能够拖动其他节点并对其施加排斥力并保持其链接线。我以为就这么简单： force.on("tick", function() { vis.selectAll("g.node") .attr("transform", function(d) { return (d.someAttribute == true) ? "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" : "translate(" + d.x + "," + d.y + ")" }); }); 我还尝试过手动设置每个刻度的节点的x和y属性，但是如果该节点受力影响，链接将继续浮动到该节点所在的位置。显然，我对应该如何工作有基本的误解。如何在固定链接的同时仍允许它们可拖动的同时将节点固定在一个位置？

67 javascript d3.js data-visualization force-layout d3-force-directed

8

有没有一种方法可以将CSV列转换为层次关系？

我有700万份生物多样性记录的csv，其中分类学级别为列。例如： RecordID,kingdom,phylum,class,order,family,genus,species 1,Animalia,Chordata,Mammalia,Primates,Hominidae,Homo,Homo sapiens 2,Animalia,Chordata,Mammalia,Carnivora,Canidae,Canis,Canis 3,Plantae,nan,Magnoliopsida,Brassicales,Brassicaceae,Arabidopsis,Arabidopsis thaliana 4,Plantae,nan,Magnoliopsida,Fabales,Fabaceae,Phaseoulus,Phaseolus vulgaris 我想在D3中创建一个可视化文件，但是数据格式必须是网络，其中每个列的不同值都是上一个特定值的列的子级。我需要从csv转到类似这样的内容： { name: 'Animalia', children: [{ name: 'Chordata', children: [{ name: 'Mammalia', children: [{ name: 'Primates', children: 'Hominidae' }, { name: 'Carnivora', children: 'Canidae' }] }] }] } 我还没有想到不使用上千个for循环就如何做到这一点的想法。是否有人对如何在python或javascript上创建此网络提出建议？

27 javascript python d3.js data-visualization hierarchical-data

1

创建椭圆形信封数据的D3映射

我有一个椭圆形的数据集，更具体地说是椭圆形的“信封”。我想知道是否有人建议我如何在D3地图上绘制这些图形。我已经有一个带有墨卡托投影的地图设置。这个stackoverflow答案有一个createEllipse函数，它使我关闭了，但是我想确保我正确地解释了数据。我从数据中插入了椭圆的长/短轴值，并使用了旋转的方位角，这是正确的吗？我也不太了解“信封”部分。每个区域中的几个椭圆如何形成一个连续的形状？任何意见，将不胜感激。 const margin = {top:0, right:0, bottom:0, left:0}, width = 1000 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const svg = d3.select('body') .append('svg') .attr('width', '100%') .attr('height', '100%') .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`); const chart = svg.append('g') …

16 javascript d3.js geospatial

3

d3同步2个单独的缩放行为

这赏金已经结束。这个问题的答案有资格获得+500声望奖励。赏金宽限期在7小时内结束。议会正在寻找一个规范的答案。我有以下d3 / d3fc图表 https://codepen.io/parliament718/pen/BaNQPXx 该图表在主要区域具有缩放行为，而在y轴具有单独的缩放行为。可以拖动y轴以重新缩放。我无法解决的问题是，在拖动y轴以重新缩放并随后平移图表后，图表中会出现“跳转”。显然，这2个缩放行为是断开的，需要同步，但是我正在竭尽全力尝试解决此问题。 const mainZoom = zoom() .on('zoom', () => { xScale.domain(t.rescaleX(x2).domain()); yScale.domain(t.rescaleY(y2).domain()); }); const yAxisZoom = zoom() .on('zoom', () => { const t = event.transform; yScale.domain(t.rescaleY(y2).domain()); render(); }); const yAxisDrag = drag() .on('drag', (args) => { const factor = Math.pow(2, -event.dy * 0.01); …

11 d3.js d3fc

1

未捕获的TypeError：t.rgb不是函数

未捕获的TypeError：t.rgb不是函数我创建了一个有角度的应用程序，并将其构建，并尝试为其提供服务 $ ng serve --prod --aot 这导致控制台中出现以下错误 Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) 该应用程序不显示当我在不缩小（--prod标记）的情况下构建应用程序时，它将起作用。我仅在使用D3时看到此问题 D3 …

10 javascript angular d3.js

Questions tagged «d3.js»