Crux 是我们组开发的一款用于数据可视化的工具(仅供参考)。但是当我想根据用户在网页选择部分的选择运行一个函数将数据重新加载到这个界面时,就会出现一些问题。
数据可视化部分的index.js:
import Crux from "crux";
import { registerDefaultBioInfoComponents } from "crux/dist/element/global";
import { editorConfig, editorRef } from "./editor";
import { Revolution } from "./revolution";
import template from "./template.bvt";
import _ from 'lodash';
import { treeLoaded } from "./data";
import { filterData, processData } from "./preprocessData";
registerDefaultBioInfoComponents();
export let visualizer;
export function init(id, paths, config) {
Crux.visualize({
el: id,
root: new Revolution(0),
renderer: "svg",
height: 1050,
width: 1440,
theme: "light",
loadData: {
tree: {
type: "tsv",
url: "/data/static_viz_data/tree_single.tsv",
loaded: treeLoaded,
},
data: {
type: "csv",
url: "/data/static_viz_data/transData.csv",
loaded: processData,
},
},
setup() {
const config = editorConfig(this);
visualizer = this;
//vue._data.editor.sections.push(config.sections[0]);
this.defineGradient("colorScale", "horizontal", ["#eef4fa", "#1565C0"]);
},
});
filterData("Saliva", "Germany", "Healthy");
}
preprocessData 包含一些辅助函数:
export const countrys = [];
export const sites = [];
export const healthStatus = [];
import { dataOpt, treeLoaded } from "./data"
import { visualizer } from "./index"
let data;
export function processData(_data){
data = _data;
_data.forEach((d, i) => {
if (sites.indexOf(d["Oral site"].trim()) <= -1) {
sites.push(d["Oral site"].trim());
}
if (countrys.indexOf(d["Country"].trim()) <= -1) {
countrys.push(d["Country"].trim());
}
if (healthStatus.indexOf(d["Health state"].trim()) <= -1) {
healthStatus.push(d["Health state"].trim());
}
});
}
export function filterData(oral, country, status) {
dataOpt.min= 0.05;
dataOpt.Abundance= 0;
dataOpt.nodeAbundance= 100;
dataOpt.aName= "";
dataOpt.maxLength= 0;
dataOpt.maxHeight= 0;
dataOpt.treeHeight= 800;
dataOpt.treeDepth= 3;
dataOpt.classficationRank= null;
dataOpt.treeRadius= 0;
dataOpt.isRadical= null;
dataOpt.noData = false;
dataOpt.isChanged = false;
const sampleID = [];
data.forEach((d, i) => {
if (d["Oral site"].trim() == oral && d["Country"].trim() == country && d["Health state"].trim() == status) {
sampleID.push(i);
}
});
if (sampleID.length == 0) {
dataOpt.noData = true;
visualizer.run();
return;
}
const meanData = [];
const attributes = [];
for (var j in data[0]) {
if (j !== "Country" && j !== "Oral site" && j!== "Health state" && j!== "ID") {
attributes.push(j);
}
}
sampleID.forEach((num, i) => {
meanData[i] = [];
let row = data[num];
for (var j in row) {
if (j !== "Country" && j !== "Oral site" && j!== "Health state") {
meanData[i][j] = row[j];
}
}
});
let finalData = [];
attributes.forEach((a, j) => {
let mean = calculateMean(a, meanData);
finalData.push({YuJ_2015: a, alien_29_600_0: mean});
});
// treeLoaded(finalData);
visualizer.data.tree = treeLoaded(finalData);
visualizer.run();
}
function calculateMean(a, meanData) {
let sum = 0;
meanData.forEach((d, i) => {
sum += parseFloat(d[a]);
});
let result = sum / meanData.length;
return result;
}
尝试在 filterData 中执行时发生错误
Uncaught TypeError: Cannot read property 'forEach' of undefined
processData可以用_data.forEach成功运行,而filterData失败,我的意思是filterData()想读取语句中的数据内容导致的错误
const sampleID = [];
data.forEach((d, i) => {
if (d["Oral site"].trim() == oral && d["Country"].trim() == country && d["Health state"].trim() == status) {
sampleID.push(i);
}
});
let 的用法有什么问题吗? 谢谢!!!