本文介绍了如何在数据读入来自多个JavaScript数组d3.js?并动态更新图表而无需刷新页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目前我有两个阵列,一个是题为NUMS号码的列表,并且MS是标题的地方字符串列表

Currently I have two arrays, one is a list of numbers titled nums, and the ms is a list of strings titled places.

防爆。

nums=[1,2,3,4,5]

places = ["house","gym", "work", "school", "park"] 

两个阵列的长度相同。

both arrays are the same length.

我想打一个条形图与这些阵列,类似于
 的,但数据是从这些来阵列,而不是一个TSV文件。

I want to make a bar chart with these arrays that looks similar to http://bl.ocks.org/mbostock/3885304, but the data is coming from these arrays rather than a tsv file.

在博斯托克的code中的数据从一个TSV文件读取时,code如下。

In Bostock's code the data is read in from a tsv file, the code is below.

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

此外,我从服务器接收更新,而其他酒吧不变某些酒吧的数据将被更新。而非刷新页面我想更新它改变吧。对于这种类型的项目我应该尝试使用类似反应,或其他任何建议。在这里帮助将大大AP preciated。谢谢!

Additionally, I am receiving updates from a server and the data on certain bars will be updating while other bars are constant. Rather than refreshing the page I want to update the bars which change. For this type of project should I try to use something like react, or any other recommendations. Help here would be greatly appreciated. Thanks!!

推荐答案

如果你想使用麦克博斯托克的code,那么你可以创建一个名为数据的数组,用的 NUM 的属性和的地方的属性:

If you want to use Mike Bostock's code then you could create an array called data, with a num property and a place property:

var data=[]; 
for(var i=0; i<nums.length; i++){
var obj = {num: nums[i], place: places[i]};
data.push(obj);
}

然后你就可以摆脱d3.tsv通话。很明显,你还需要有d.place和d.num取代麦克的引用d.letter和d.frequency。

Then you can get rid of the d3.tsv call. Obviously you'll also need to replace Mike's references to d.letter and d.frequency with d.place and d.num.

在你的JavaScript code,监听该数据已更新任何事件的信号,然后打电话给你的图表绘制方法时发生这种情况。

In your javascript code, listen for whatever event signals that the data has been updated and then call your chart plotting method when this occurs.

这篇关于如何在数据读入来自多个JavaScript数组d3.js?并动态更新图表而无需刷新页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-03 02:45