D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。这里也可以看到它是用SVG来呈现图表的，所以使用D3.js是需要一定的SVG基础的。 如何用D3.js实现柱状图？柱状图里面有坐标轴和柱子。然而我们还需要SVG画布来画这些东西。先把大概的画图框架搭起来，代码如...
先来看看效果图下面直接上源代码，html文件<html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text {font-family: sans-serif;font-size: 11px;}.overlay {fill: none;pointer-events: all;}.tooltip{width: 150px;height: auto;position: absolute;font-family: simsun;font-size: 16px;line-height: 26px;text-al...
D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。 在我接触一段时间，有了一些了解之后，简单说说我的理解。 data() 先看一个例子： <body><p></p><p></p><p></p> </body>执行代码： 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...
D3是一个基于数据操作的可视化js库，认识d3，就从最基础的显示可加载数据谈起。 html的基本框架不多说，先上代码再解释： 新建一个test目录，在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 ， d3存放d3.v3.js 在demo文件夹下新建indexP.html，将下面代码复制其中，双击在浏览器打开查看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Setting paragraphs style conditiona...
Python equivalent of D3.js Ask QuestionAsked?7 years, 1 month ago Active?10 months ago Viewed?90k times 9976 Can anyone recommend a Python library that can do interactive graph visualization? I specifically want something like d3.js but for python and ideally it would be 3D as well. I have looked at:NetworkX - it only does Matplotlib plots and those seem to be 2D. I didnt see any sort of interacti...
我正在使用d3.js来显示有关网络流量的信息,从而产生很大的效果.在可视化的某个点,y轴用于显示字节数. 我当前使用的是d3.svg.axis().ticks()系统,它的轮数很好,例如20000.转换为kB / MB / etc时,结果却是尴尬的数字,例如19.5和9.8.有没有一种方法可以使(2 ^(10 * c))的倍数变回原来的价格,例如1024、1048576等,而不是(10 ^ c)的倍数？ 其他信息/想法： >我很欣赏svg.axis为我处理绘画的基本细节,并希望找到一个不会取代此功能的解决...
我想用D3.js绘制柏林(德国)的轮廓. 我使用的Berlin的geoJSON文件是这样的(有Berlin-“bundeslnder”)：http://opendatalab.de/projects/geojson-utilities/ 但这不适用于我的.json文件.对于我们的州,我无法发现与该.json文件的区别,使用完全相同的代码就可以正常工作：http://examples.oreilly.com/0636920026938/chapter_12/us-states.json 我还试图完全复制us-states文件,删除除一个之外的所有“功能”条目,然后仅用文件的坐标数...
我正在尝试在d3.js中创建一个包含两个图表的数据可视化：平行轴图和水平色条图(我只是用这个名字组成,但是基本上是一系列彩色矩形).平行轴图中的每条线都与色条图中的一组矩形相关联. 现在,将鼠标悬停在给定的行上将突出显示该行,而将鼠标悬停在给定的矩形上将突出显示该组矩形.我的目标是在用户将鼠标悬停在任一图表上时,在相反的图表上突出显示关联的线或一组矩形.如果我用相同的函数生成两个图表,这似乎非常简单.但是,赋予每个图...
我对创建点图(每个数据值都有连续点的点图)感兴趣,但是到目前为止,我已经设法为每个值创建一个点. 更清楚地说,对于要让第一个值创建5个圆的array1,对于第二个4个圆,以此类推…array1 = [5,4,2,0,3] 有任何想法吗？ 我的部分代码：var circle = chart.selectAll("g").data(d).enter().append("g").attr("transform", function(d) { return "translate(" + xScale(d.values) + ",0)"; }); circle.append("circle").attr("cx", xScale...
我正在尝试创建一个简单的可缩放图表,其中包含时间缩放的x轴和序数y轴(字符串数组).该图表可以与实值y轴配合使用,但是当我使用序数y轴时,会得到一个Uncaught TypeError: undefined is not a function我已经花了很多时间来解决这个问题,但是看不到解决方案.我想知道D3专家是否会帮助我看到光线. 对于专业读者,此异常发生在d3.v3.js重新缩放函数中的第1344行.function rescale() {if (x1) x1.domain(x0.range().map(function(x) {ret...
我正在尝试制作一个在x轴上具有时间刻度的可缩放图表. 默认行为使用xScale像这样：var x = d3.time.scale().domain([getDate(minDate), getDate(maxDate)]).range([0, width]);和一个xAxis像这样：var xAxis = d3.svg.axis().scale(x);几乎是我所追求的. 但我想使用一种自定义的时间格式来显示年份,而不是显示月份名称,而只显示一个刻度线,不显示文本(并可能在这些刻度中添加一个类),同时仍保留默认值缩放轴的行为. 任何帮助将非常...
我基于this拖放示例进行工作： 我想拖动一个组.我将两个矩形都放在单个组中,现在想拖放整个组,在我的代码中,拖放仅适用于单个矩形,而不适用于组. 这是我的代码：<!DOCTYPE html><html><head><script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script><title>Drag And Drop</title></head><body> <div id="viz"></div><script type="text/javascript">var vizSVG = d3.select("#viz").append("svg")....
我一直在尝试根据某些节点的链接为它们着色,但是我不确定该怎么做.这是我当前的图形：我一直在尝试自动为同一集群中的所有节点着色(即通过作为集群中任何节点的源或目标相互连接),但到目前为止我的所有尝试都是徒劳的. 我听说可能需要执行递归函数,但是我的递归是自学的,从根本上来说是错误的.这是我当前的代码：function assignGroup() { var groupedNodes = [];for(var i = 0; i < gNodes.length; i++) {if(nodes[i].group !== u...
因此,实现受M Bostock example启发的画笔行为时,我遇到了一些我不太了解的东西.如果为画笔的“ end”事件设置了回调,则当您直接与画笔进行交互时,将按预期方式调用该回调.但是,每当我重新整理画笔时,似乎结束事件都会触发两次.为什么会这样？还是我在这里做错了什么？<!DOCTYPE html> <style>.selected {fill: red;stroke: brown; }</style> <svg width="960" height="150"></svg> <div>Event fired <span id="test"></span></div>...