这个需求其实挺明确的，但是网上搜出来的教程都乱七八糟，觉得实在需要自己总结一下。 D3.js目前已经被广泛使用在数据可视化领域，随着大数据的持续发展，这个框架估计会在今后更加流行（据说其作者Mike Bostock开始全职开发了，之前是负责纽约时报数据可视化的工程师，他本人也从纽约搬家到了旧金山……）。按照这里的介绍：https://github.com/mbostock/d3/wiki/API-Reference，D3.js实际上有专门读取JSON数据的API，所以其实D3....
我使用D3.js绘制树,与此图表相同：http://bl.ocks.org/mbostock/7809166但是高度和宽度是固定的,我想高度可以通过内容自动调整. 我的代码：var svg = d3.select("#feature_tree").append("svg").attr("width", width + margin.right + margin.left).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 如果我没有定义高度,则无法完全显示树,除非我放大浏览器,否则可以显示缺失的树节点. 如果我...
我正在创建一个特定州的地图,我一直在尝试使用d3.js和topojson并创建了一个很棒的地图,但现在我想在地图上添加一个标记. 但是现在我遇到了问题,因为当我添加标记有一个GeoJSON文件来为生成的地图添加标记时,我还想在按下标记时打开工具提示. 我的地图非常类似于：http://bl.ocks.org/mbostock/4699541,我想要的是通过具有标记的地理坐标的GeoJSON文件向状态添加标记. 所以地图是目前的 预计地图……解决方法:你可以在你的json回调结...
害怕我在如何将这个JavaScript转换为类中的CoffeeScript时犯了一个简单的错误 在这original example of a world map我们有一个功能：var quantize = d3.scale.quantize().domain([0, .15]).range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));然后在渲染地图时调用它：.attr("class", function(d) { return quantize(rateById.get(d.id)); })我们留下类似class =“q8-9这就是我们想要的东西. 将其转换为CoffeeScript...
我正在使用D3.js构建此折线图及其工作正常.但我无法以缩写形式在X轴上打印月份(jan,feb ….) 这是我解析日期的方式.var parseDate = d3.time.format("%m-%Y").parse;x轴代码var xAxis = d3.svg.axis().scale(x).orient("bottom");以及打印和附加svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);帮助我.解决方法:只需在内部使用d3.time.format的tickFormatvar xAxis = d3.s...
我一直在寻找从d3.js下载生成的svg的方法,我最终得到了phantom.js,这看起来有点矫枉过正(或者至少令人生畏,因为问题的“简单性”)或者svg-crowbar.js这显然只适用于chrome(我需要firefox). 我还发现了以下代码：//Encode the SVG var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(d3.select('svg').node()); var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString); //Use the downlo...
尝试构建位置搜索应用程序,该应用程序显示谷歌地图 – 在地图上的用户绘图上,它显示位于该区域内的所有用户. 我也发现了这个例子 – 但看起来很笨/不平 – http://jsfiddle.net/pPMqQ/34/ http://jsfiddle.net/4xXQT/156/var width = 960,height = 500;var points = d3.range(1, 5).map(function(i) {return [i * width / 5, 50 + Math.random() * (height - 100)]; });var dragged = null,selected = points[0];var line = d3.sv...
假设我有一个直方图脚本,可以构建一个960 500 svg图形.如何调整响应,以便调整图形宽度和高度是动态的？<script> var n = 10000, // number of trialsm = 10, // number of random variablesdata = [];// Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) {for (var s = 0, j = 0; j < m; j++) {s += Math.random();}data.push(s); }var histogram = d3.layout.histogram()(data);var width = 960,height = 50...
我想在链接的一端放一个箭头.我已经管理了链接,但无法绘制箭头.这是我的代码,可以正常工作,但是我上面提到的问题只是帮助我如何绘制箭头.谢谢. 请记住,我希望箭头指向目标一侧.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="D3js_demo.WebForm1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script type="text/javascript" src="http://d3js.o...
我可以使用CSV文件中的数据使用d3.js,dc.js和crossfilter创建HeatMap. 码：var chart = dc.heatMap("#test"); d3.csv("morley.csv", function(error, experiments) {var ndx = crossfilter(experiments),runDim = ndx.dimension(function(d) { return [+d.Run, +d.Expt]; }),runGroup = runDim.group().reduceSum(function(d) { return +d.Speed; });chart.width(45 * 20 + 80).height(45 * 5 + 40).dimension(runDim).group(ru...
目前我在FCC的项目National Contiguity工作 本质上我能够弄清楚如何渲染标志精灵并连接节点及其链接. 我唯一遇到的问题是实现的是如何表现得与FCC的example类似.具体来说,我正在尝试让节点像示例中那样排斥边界. 但是,我的行为并不那样(事实上,它是非常集群的,但我不确切知道d3.js Force Documents V4中我应该研究哪些属性).相反,似乎虽然节点和链接在边界附近停止,但它在那个点停止const width = w - (margin.left + margin.right...
所以我使用http://bl.ocks.org/mbostock/4339083来创建一个可折叠的树,它很棒. 现在问题是我有一些具有相同子节点的节点,所以我想知道是否有任何方式可视化图形,使父母都扩展到同一个孩子？ 所以基本上当你扩展父节点时,它应该自动扩展另一个父节点导致同一个普通子节点,这可能与任何图形一起吗？解决方法:根据您的描述,我收集您需要可视化有向无环图或DAG. 树是：A |B C/ D EDAG是：A |B C\|D并且,不幸的是,D3树和群集布局根本不...
D3是一个基于数据操作的可视化js库，认识d3，就从最基础的显示可加载数据谈起。 html的基本框架不多说，先上代码再解释： 新建一个test目录，在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 ， d3存放d3.v3.js 在demo文件夹下新建indexP.html，将下面代码复制其中，双击在浏览器打开查看效果。D3: Setting paragraphs' style conditionally, based on data var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body")....
D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。 在我接触一段时间，有了一些了解之后，简单说说我的理解。 data() 先看一个例子：执行代码：d3.select("body").selectAll("p").data([1, 2, 3])这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。 从表面上，并不能看出什...
D3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法（semantic versioning）。 你可以用 d3.version 查看当前的版本信息。 d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文档中选择多项元素。selection.attr - 设置或获取指定属性。selection.classed - 添加或删除选定元素的 CSS 类（CSS class）。selection.style - 设置或删除 CSS 属性。style优先级高于attr。selecti...