Tag: d3.js
从数据访问d3.js元素属性？
我试图访问一些特定的svg圈子的cx＆cy属性，我已经使用d3.js的.data（）函数绘制到屏幕上，任何人都可以帮忙吗？ 下面是试图访问它的代码。 d3.selectAll(".mynode").each( function(d, i){ if(d.someId == targetId){ console.log( d.attr("cx") ); // just trying to demo my point, doesn't work } } 我对d3.js＆javascript很新，所以我不确定我是否会接近前端，或许我可能错过了一个内置的解决scheme？
如何在xAxis上使用d3.js格式化时间
根据演示http://bl.ocks.org/mbostock/3883245 我不知道如何在xAxis上格式化时间 这是我的代码：js： var data = [{ “creat_time”：“2013-03-12 15:09:04”， “record_status”：“ok”， “roundTripTime”：“16” }，{ “creat_time”：“2013-03-12 14:59:06”， “record_status”：“ok”， “roundTripTime”：“0” }，{ “creat_time”：“2013-03-12 14:49:04”， “record_status”：“ok”， “roundTripTime”：“297” }，{ “creat_time”：“2013-03-12 14:39:06”， “record_status”：“ok”， “roundTripTime”：“31” }，{ “creat_time”：“2013-03-12 14:29:03”， “record_status”：“ok”， “roundTripTime”：“0” }]; var margin = {top：20，right：20，bottom：30，left：50}; var width = 960 – margin.left – margin.right; var height = 500 – margin.top – margin.bottom; var parseDate = […]
如何获取d3.js中父节点的数据
我正在做嵌套在D3和嵌套元素，我需要达到其父母的数据对象。 现在我正在做 d3.select(this).node().parentNode.__data__; 有没有更好的办法？
响应D3图表
我有这个D3图表 – 几乎是开箱即用的。 有没有办法使它响应和使用百分比的宽度和高度variables，innerRadius和outerRadius？ 我在自适应网站上工作，需要根据屏幕大小/浏览器大小进行更改。 jsfiddle here： http : //jsfiddle.net/BTfmH/1/ 码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; } .chart-container { /* width:50%; height:50%;*/ } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 350, height = 350, τ = 2 * Math.PI; var arc = d3.svg.arc() .innerRadius(100) […]
如何使用d3.js更新轴
我试图在图表上显示不同的数据。 用户可以单击单选button来更改显示的数据。 我正在使用“气泡图”来呈现数据。 对于每种types的数据，我需要更新Yaxis（域是不同的）。 这是我现在所做的： 图表初始化 var svg = d3.select("body .main-content").append("svg") .attr("class", "chart") .attr("width", width) .attr("height", height); 初始化轴 initAxis(); function initAxis() { var y = d3.scale.linear().domain([0,1000]).range([height-margin, margin]).nice(), x = d3.scale.linear().domain([0,23]).range([margin,width-margin]), yAxis = d3.svg.axis().scale(y).orient("left"), xAxis = d3.svg.axis().scale(x).orient("bottom"); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin + ",0)") .call(yAxis); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height […]
Javascript库d3调用函数
我无法理解d3.call（）如何工作以及何时何地使用它。 这里是我试图完成的教程链接。 有人可以请具体解释这件作品 var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); svg.append("g").call(xAxis);
D3 4.0的rangeRoundBands相当于？
我看到很多D3代码都是这样的： var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); 从D3版本4.0开始， d3.scale.ordinal()现在是d3.scaleOrdinal ， rangeRoundBands似乎不见了。 > d3.scaleOrdinal() { [Function: scale] domain: [Function], range: [Function], unknown: [Function], copy: [Function] } 这个代码（来自Mike Bostock的条形图示例 ）的D3 v4等价物是什么？ var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1);
在AngularJS应用程序中的D3
我正在尝试使用AngularJS创build我的第一个应用程序。 它看起来整洁，但是有很多抽象，我只是好奇，如果任何人有最常用的方法来使用angular度方法来更新用d3js创build的视觉效果的build议。 谢谢，bp
如何访问与D3 SVG对象相关的DOM元素？
我试着通过尝试一下他们的基本泡泡图来学习D3。 第一个任务：弄清楚如何拖拽一个气泡，并在被拖拽时变成最上面的对象。 （问题是D3的对象模型映射到DOM，但我会到达那里…） 要拖动它，我们可以使用它们提供的代码简单地调用d3的拖动行为： var drag = d3.behavior.drag() .on("dragstart", dragstart) .on("drag", dragmove) .on("dragend", dragend); 很好用。 拖得很好。 现在，我们如何才能成为最重要的项目呢？ 在这里search“svg z-index”，很明显，改变索引的唯一方法是在DOM中进一步移动对象。 好。 它们并不容易，因为单个的泡泡没有ID，但是搞乱了控制台，我们可以find其中一个泡泡对象： $("text:contains('TimeScale')").parent() 我们可以将它移动到包含svg元素的末尾： .appendTo('svg') 这样做后拖动它，这是最高的项目。 到目前为止， 如果您完全在DOM中工作，那么这么好。 但是：我真正想要做的就是自动发生一个给定的对象/泡泡拖动。 D3为dragstart()和dragend()函数提供了一个模型，这将允许我们在拖动过程中embedded一条语句来执行我们想要的操作。 D3提供了d3.select(this)语法，它允许我们访问d3的当前拖动的对象/气泡的对象表示。 但是，我该如何干净地将这个庞大的数组返回到一个可以与之交互的DOM元素的引用中 – 例如，将其移动到svg容器的末尾，或者在DOM中执行其他引用，例如表单提交？
平静一下力量布局的初始勾号
我刚刚开始涉足d3，发现学习曲线陡峭。 这个过程与我习惯的过程完全不同，math大部分都在我头上。 无论如何，我的项目由代表系统之间的集成图的力布局组成。 这部分工作得非常好，但我确实有一个主要的关注点，这也是在Michael Bostocks网站上的强制定向布局演示中所表示的：当节点启动时，它们似乎被渲染成canvas。 在此之后，一些严重的物理math正在接pipe，模拟引力拉动，使节点在一个相当混乱的path上前后来回，直到它们冷静下来，并在随机坐标上定位。 尽pipe这些动作在演示第一次运行的时候就酷了，但是当你试图从公司的networking接口看pipe理员的angular度，服务器不会停下来的时候，一段时间后会变得很烦人。 我相信我有这个项目的正确布局设置，因为我确实希望服务器自动布局，我想要看到它们之间的链接。 然而，我对引力效应感到矛盾。 我在想; 是否可以手动设置每个节点的初始位置，以便我可以将它们靠近引力中心并缩短“跳动时间”一点？
