有谁知道如何通过D3完成每帧回调的转换.这是我目前正在做的事情的例子.link.transition().duration(duration).attr("d", diagonal).each("end",function(e) {if(e.target.id == current)show_tooltip(e.target)});这当前在动画结束时为每个元素调用匿名函数.我想把它称为每一帧.解决方法:您可以注册一个自定义补间,它返回每个tick时要调用的函数.link.transition().duration(duration).attr("d", diagonal).tween("side-effects", ...
我昨天刚开始使用d3.js,我在完成任务时遇到了一些麻烦. 现在我创建了一个包含两个y轴的图表,每个轴显示一些值,x轴显示日期. 单击y轴上的值,我显示相应的水平网格线. 我的问题是,当放大或缩小或拖动时,网格线(水平和垂直)不能使用轴值正确缩放,它们根本不移动. 我今天下午搜索了很多,并找到了一些如何做的例子,但它们似乎都没有使用我已有的代码. 我认为,逻辑应该添加到缩放行为,但我不确定// x axis gridlines function make_x_gri...
前言leaflet 入门开发系列环境知识点了解：leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件，leaflet 的插件库，非常有用内容概览leaflet 实现地形剖面分析源代码 demo 下载本篇 demo 利用 leaflet api 实现地形剖面分析，效果图如下：完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏 文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
我有一个d3强制导向图,其中包含一组节点：var node = vis.selectAll("g.node").data(json.nodes).enter().append("svg:g").attr("class", "node").attr("id", function(d) { return "node" + d.index; }).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(force.drag);这很好. 我现在想要在显示带有详细信息detail_container的详细信息div时将这些节点转换(移动)到右边200个像素. 我尝试了以...
我正在尝试创建一个D3.js packed circle diagram. 当我将数据嵌入HTML文件时,它工作正常.当我将数据放在外部文件中时,我什么也得不到(空白DOM,没有控制台消息). 如果取消注释var数据声明并注释掉d3.json(以及相应的右括号),它可以正常工作. 我可以在浏览器中看到“2013 Inf-2.json”文件,它看起来很好(它通过了jsonlint验证).它包括从第一个“{”到/包括最后一个“}”的所有内容.就像嵌入式的例子一样. 我在OSX Mavericks上通过htt...
我正在使用它进行简单的可视化. http://bl.ocks.org/KoGor/5994804 我想在每个国家的路径上添加他的名字.我试图遍布各国,但我不知道与SVG联系.var world = svg.selectAll("path.land").data(countries).enter().append("path").attr("class", "land").attr("d", path)解决方法:您可以使用函数为每个数据项动态构建类属性：var world = svg.selectAll("path.land").data(countries).enter().append("path").attr("class", function(...
我正在尝试为svg：text元素拾取鼠标事件.我注意到的是.on(“click”,…)有效,但其他事件如“mouseover”,“mousemove”和“mouseout”都没有. 查看Health & Wealth of Nations示例,我看到所采用的方法是使用不可见的svg：rect覆盖文本,并为其分配事件.如果有一个简单的盒子,这很好,但如果有几个,它似乎会变得烦人和凌乱. 有没有规范的方法来处理文本的鼠标悬停事件？ 为了尽可能具体,我正在尝试使用标签云,并为每个标签选择这些悬停...
我正在使用NVD3的lineChart模型. 我需要强制设置相对于实际值的最小和最大y轴值,例如： chart.lines.forceY([分钟/ 1.1,最大* 1.1]); 如何获得当前的最小/最大y轴值？解决方法:您可以通过chart.yAxis.scale().domain()获取当前域.
我有一个d3.js的甜甜圈,我想在它的中心放一些信息.我可以追加文本元素,但我想在那里放一个格式化的信息,所以我决定在mouseover上添加div：$(".arc").on("mouseover",(function(){ d3.select("text").remove(); var appendingString="<tspan>"+cityName[$(this).attr("id")]+"</tspan> <tspan>"+$(this).attr("id")+"%</tspan>"; group .append("text") .attr("x",-30) .attr("y",-10) .text(appendingString); })); 由于某种原因di...
我正在尝试更改此处找到的序列Sunburst的数据：http://bl.ocks.org/kerryrodden/7090426 我希望它在单击按钮时更改为新数据集(csv或json). 我尝试读取一个新的csv,并调用createVisualization(json);:$('.toggle-data').click( function() {d3.text("../csv/new-data.csv", function(text) {var csv = d3.csv.parseRows(text);var json = buildHierarchy(csv);createVisualization(json);}); });我也尝试直接使用更新的json调用crea...
Here is a sample fiddle of a simple chart. 我是第一个学习D3.js的人,我很喜欢它并且它和它的创造者Mike Bostock印象深刻. 我创建了一个图表网页,其价值相互影响,有点像Bostock的惊人Rent Versus Buy calculator in the New York Times. 我试图创建一个滑块(使用JqueryUI)来更改输入值(如下面显示的$250,000输入框),这会影响图表的y值.它有效,但外观令人失望,不适合移动设备. 我一直无法通过教程或documentation弄清楚如何创建像...
我正在尝试使用和理解D3 visualization library(http://mbostock.github.com/d3/),我正在研究their force directed code,看起来他们正在使用四叉树来计算粒子上的力.代码是var k = kc * quad.count * dn * dn;node.px -= dx * k;node.py -= dy * k;它看起来似乎是quad.count是四叉树节点中的粒子数.但是在https://github.com/mbostock/d3/blob/master/d3.geom.js#L696看了他们的quadtree code,我找不到任何关于计数的参考,以及它是...
我一直在尝试使用d3.js为我的图形创建一个水平图例.我一直在努力使动态标签的x轴间距正确. 问题是标签的宽度不一致,这里是full example,这是我计算x位置的函数：function legendXPosition(data, position, avgFontWidth){if(position == 0){return 0;} else {var xPostiion = 0;for(i = 0; i < position; i++){xPostiion += (data[i].length * avgFontWidth);}return xPostiion;} }有没有人对如何改进这个有任何建议？解决方法:我建...
我是D3.js的新手.我正在阅读Mike Dewar的D3入门.我尝试了书中的第一个例子,它不起作用.我一直在撕扯我的声音.这里的代码出了什么问题？ 在< head>中部分：<script src="http://mbostock.github.com/d3/d3.js"></script> <script>function draw(data) {"use strict";d3.select("body").append("ul").selectAll("li").data(data).enter().append("li").text(function (d) {return d.name + ": " + d.status;});} </script>在< body>中...
如何使用node.js从mongodb服务器上的数据创建d3.js图？解决方法:D3.js包括通过url等将request non-local data作为json或text(csv)的方法. 在对安全性不敏感的设置中(例如本地开发或演示环境),如果启用它,您可以相当直接地使用mongo rest api,它将为您提供对象的json输出. 或者,您可以编写构建一个简单的http服务器(例如python、perl或go),该服务器执行(python(也subprocess),perl(也backticks and qx{}),go)具有正确参数的mongoexp...