Tag: d3.js

GeoJSON和TopoJSON的区别: GeoJSON和TopoJSON有什么区别，我什么时候可以使用它们？ GitHub上的TopoJSON的描述意味着TopoJSON文件小了80％。那么为什么不直接使用TopoJSON呢？

用D3产生一个“活”图: 我最近开始学习使用D3.js框架，虽然看起来它已经被devise成完全符合我的需求，但我找不到一个“实时”更新graphics的简单示例。我正在寻找一种线形图，可以在新数据可用时进行更新。新的数据可以通过点击一个带有“上次看到”时间戳或其他AJAX-y方法的json url来获得。编辑：答案的D3部分在这里： http://bost.ocks.org/mike/path/ 现在，人们如何build议从服务器获取新的数据到客户端？

了解D3.js如何将数据绑定到节点: 我在阅读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; }); 我明白了这一点，但是var td语句的.data(function(d) { return d; })部分是怎么回事呢？我最好的猜测如下： […]

使用D3更新SVG元素Z索引: 使用D3库将SVG元素置于z顺序的顶部是一种有效的方法？我的具体情况是一个饼图，它突出显示（通过添加一个stroke到path ），当鼠标在给定的一块。生成我的图表的代码块如下： svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); }) .attr("stroke", "#fff") .attr("stroke-width", 0) .on("mouseover", function(d) { d3.select(this) .attr("stroke-width", 2) .classed("top", true); //.style("z-index", 1); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke-width", 0) .classed("top", false); //.style("z-index", -1); }); 我已经尝试了几个选项，但目前还没有运气。使用style("z-index")和调用classed都没有工作。在我的CSS中，“top”类定义如下： .top { fill: red; z-index: 100; } fill声明在那里，以确保我知道它正确地打开/closures。它是。 […]

d3 js – 加载没有http获取的json: 我正在学习D3。在d3 js 中加载数据有一定的方法。但是他们都似乎做了一个HTTP GET。在我的情况下，我已经有一个string中的json数据。我怎样才能使用这个string，而不是另一个http请求？我试图寻找这个文件，但没有发现。这工作： d3.json("/path/flare.json", function(json) { //rendering logic here } 现在，如果我有： //assume this json comes from a server (on SAME DOMAIN) var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}'; 如何在d3中使用已计算的'myjson'并避免对服务器进行asynchronous调用？谢谢。

在d3中旋转x轴文本: 我是新来的d3和svg编码，我正在寻找一种方法来旋转图表的xAxis文本。我的问题是，通常xAxis标题比条形图中的条宽。所以我正在寻找旋转文本垂直运行（而不是水平）在xAxis之下。我试着添加transform属性：.attr（“transform”，“rotate（180）”）但是当我这样做的时候，文字就完全消失了。我试图增加svgcanvas的高度，但仍然无法查看文本。对我在做什么错的任何想法都会很棒。我是否还需要调整x和y的位置？而且，如果是这样，多less（当我在Firebug中看到它时很难排除故障）。

如何从节点中删除所有子元素，然后再以不同的颜色和大小应用它们？: 所以我有下一个强制布局graphics代码来设置节点，链接和其他元素： var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; […]

与Angular 2一起使用D3.js: 我已经成功地集成了Angular 2（Alpha 44）和D3.js： <html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <script> System.config({packages: {'app': {defaultExtension: 'js'}}}); System.import('app/app'); </script> </head> <body> <my-app>Loading…</my-app> </body> </html> app.js： /// <reference path="./../../typings/tsd.d.ts" /> import {Component, bootstrap, ElementRef} from 'angular2/angular2'; @Component({ selector: 'my-app', template: '<h1>D3.js Integrated if background is yellow</h1>', providers: [ElementRef] }) class AppComponent { elementRef: […]

Python相当于D3.js: 任何人都可以推荐一个可以做交互式graphics可视化的Python库吗？我特别想要d3.js，但是对于python ，理想情况下它也是3D。我曾看过： NetworkX – 它只做Matplotlib绘图和那些似乎是2D。我没有看到任何types的互动，就像d3.js给出的一样，比如拉节点。 graphics工具 – 它只能做2D图，而且有很慢的交互图。

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 ((b = […]