d3.js服务器json文件,由D3.js中的json文件堆积的区域图(stacked area graph by json file in D3.js)...

由D3.js中的json文件堆积的区域图(stacked area graph by json file in D3.js)

有没有人知道由json文件构建的D3.js图(堆积区域图)的任何示例。 我发现的所有内容都基于tsv或csv。

谢谢，

Does any one know any example in which the D3.js graphs (stacked area graphs) built by a json file. All I have found is based on tsv or csv.

Thanks,

原文：https://stackoverflow.com/questions/17461765

更新时间：2020-07-13 07:07

相关问答

所以听起来你有以下情况： 你有一个功能 function draw_graph(data) {

// whatever you need to do to draw the graph

}

然后 function maybe_xhr_and_then_draw_or_just_draw(path_or_data) {

if(is_remote(path_or_data)) {

d3.json(path_or_data, draw_graph)

} else {

dra

...

以下是您可能需要的示例(摘自： https ： //bl.ocks.org/mbostock/3883245 ) var data = [

{

Date : "2017-12-17 18:30:01",

Sales : "50"

},

{ Date : "2017-12-17 17:30:00",

Sales : "20"

},

{

Date : "2017-12-

...

// Get the data

d3.csv("php/air_temperature_data.php", function(error, data) {

data.forEach(function(d) {

d.date = parseDate(d.date);

d.close = +d.close;

}

//... SHOULD BE IN HERE

);

// ALL THIS STUFF...

var tickValues =

...

请遵循标准更新模式： https ： //bl.ocks.org/mbostock/3808218 在您的情况下，如果您只想删除旧图层并重绘它们： svg.selectAll(".layer").remove();

var new_layer = svg.selectAll(".layer")

.data(new_layers)

.enter().append("g")

.attr("class", "layer")

.style("fill", function(d, i) {

...

问题： 在变量中使用d3.json 。 d3.json不返回任何内容(实际上，它返回一个与请求相关的对象，与文件内容本身无关)。 解： d3.json(url[, callback]) 。 说明： D3提供了一种加载JSON文件的方法。 你必须这样做： d3.json("linedata.json", function(data){

function initChart(){

//all your code for initChart here

};

ini

...

d3 geoProjection使用未投影的坐标 - 三维地球上的坐标。 geoProjection采用这些坐标并将它们投影到二维平面上。 未投影坐标的单位通常是度经度和纬度，d3 geoProjection期望这样。 问题是您的数据已经预测。 如何判断数据是否已投影？ 有两种快速方法可以确定您的数据是否已投射： 查看数据的元数据 看看地理坐标本身 查看地理元数据 您的数据使用的投影在.prj文件中定义，该文件构成构成shapefile的文件集合的一部分： PROJCS["Canada_Alber

...

正如@Shashank指出你的JSON是无效的。 这与d3无关，而是JavaScript和可接受的JSON格式。 那么，我们该如何解决它？ 你可以在你的d3 / javascript本身而不是预处理文件。 // how many lines of JSON make an object?

var chunks = 5,

data = [];

//download file as TEXT

d3.text("data.txt", function(error, text) {

if (e

...

您的JSON blob随着时间的推移而出现故障。 如果按正确的时间顺序对数据点进行排序，您将获得正确的图表。 http://vida.io/documents/ZkoBevX2ZGD8pCxZu Your JSON blob is out of order with time. If you sort your data points in correct time order, you'll get the correct graph. http://vida.io/documents/ZkoB

...

您告诉它使用数据点直到“this_week_number”，并且在此之后的所有几周使用y = 0。 但是x值仍然在不断增加，所以你有一个零宽度区域延伸到轴的末端。 而且你仍然有一条线从本周的(x，y)数据点绘制到下周的(x，0)数据点。 要实际裁剪区域，您需要裁剪x值和y值： var area = d3.svg.area()

.x(function(d,i) {

if (i <= this_week_number) {

return x(d);

} else {

...

我发现了很多： 绘制形状的人( http://www.dashingd3js.com/using-json-to-simplify-code ) 另一个绘制图形( http://bl.ocks.org/mbostock/4062045 ) 一篇有用的文章解释了与(out)AJAX的数据转换( http://empire5.com/development/d3-js-dynamic-bar-graphing-with-transitions-and-json/ ) 另外，看看这个问题， d3.js差

...