Javascript 如何使直方图中的标签响应动态用户输入

我有以下工作代码。它获取输入数据并根据阈值显示直方图

如果您运行下面的代码，则代码正在扩展 拖动滑动条时直方图会发生变化

然而，标签

26个基因

不会随着我们拖动阈值而改变 从1.5到2。我预计值将更改为

30个基因

。 这些值编码在

var输入_数据中

，尤其是

nof_基因

我怎样才能使它生效

“严格使用”；
var直方图，
阈值=[]；
变量输入_数据=[{
“门槛”：1.5，
“直方图”：[{
“样本”：“样本1”，
“nof_基因”：26，
“价值观”：[{
“得分”：6.7530200000000002，
“单元类型”：“B单元”
}, {
“分数”：11.432763461538459，
“细胞类型”：“树状细胞”
}, {
“分数”：25.823089615384621，
“细胞类型”：“巨噬细胞”
}, {
“分数”：9.9911211538461551，
“celltype”：“gdTCells”
}, {
“分数”：7.817228076923076，
“细胞类型”：“干细胞”
}, {
“分数”：17.482806923076922，
“细胞类型”：“基质细胞”
}, {
“分数”：29.335427692307697，
“细胞类型”：“单核细胞”
}, {
“分数”：28.914959615384621，
“细胞类型”：“中性粒细胞”
}, {
“分数”：13.81888461538467，
“celltype”：“NKCells”
}, {
“分数”：9.5030688461538464，
“单元类型”：“abTcells”
}]
}]
}, {
“门槛”：2，
“直方图”：[{
“样本”：“样本1”，
“nof_基因”：30，
“价值观”：[{
“分数”：5.13354999996，
“单元类型”：“B单元”
}, {
“分数”：16.07607249999999，
“细胞类型”：“树状细胞”
}, {
“分数”：46.1820324999998，
“细胞类型”：“巨噬细胞”
}, {
“分数”：6.589570000000001，
“celltype”：“gdTCells”
}, {
“分数”：5.321880000000002，
“细胞类型”：“干细胞”
}, {
“分数”：53.643625，
“细胞类型”：“基质细胞”
}, {
“分数”：85.1618225，
“细胞类型”：“单核细胞”
}, {
“分数”：55.559129999996，
“细胞类型”：“中性粒细胞”
}, {
“分数”：7.67175249999984，
“celltype”：“NKCells”
}, {
“分数”：6.327780000000006，
“单元类型”：“abTcells”
}]
}]
}];
processData（输入_数据）；
函数processData（数据）{
直方图=数据[0]。直方图。映射（函数（数据）{
返回{
标题：data.sample，
数据集：新的Plottable.dataset（），
nofgenes:新建Plottable.Dataset（），
dataByThreshold:{}，
nofGenesByThreshold:{}，
载入基因：功能（阈值）{
this.nofgenes.data（this.nofGenesByThreshold[threshold]）；
},
加载：功能（阈值）{
this.dataset.data（this.dataByThreshold[threshold]）；
}
};
});
data.forEach（函数（数据）{
var阈值=data.threshold；
阈值。推送（阈值）；
数据.直方图.forEach（函数（直方图，i）{
直方图[i].dataByThreshold[threshold]=直方图.values；
直方图[i].nofGenesByThreshold[threshold]=直方图.nof_基因；
});
});
//这里我们推广了滑动条最大阈值
$（'#threshold'）.attr（'max'，thresholds.length-1）；
更新的数据集（阈值[0]）；
updateNofGenes（阈值[0]）；
buildPlots（）；
updateThreshold（）；
}
$（“#阈值”）.change（updateThreshold）；
函数updateThreshold（）{
//这是用户输入更新滑块的位置
//发生在QTIP运行的位置。
var thresholdinex=parseInt（$（'#threshold'）.val（），10）；
$（“#foldchange_threshold”）.html（thresholds[thresholdIndex]）；
更新的数据集（阈值[thresholdIndex]）；
updateNofGenes（阈值[thresholdIndex]）；
$（“.tooltipped.content rect”）.qtip({
改写：对，
职位：{
我的：“中底”，
在“中上”
},
风格：{
课程：“qtip灯”
},
内容：{
文本：函数（）{
返回$（this.attr）（“qtip2标题”）；
}
}
});
}
函数更新数据集（阈值）{
直方图。forEach（函数（直方图）{
直方图。负荷（阈值）；
});
}
函数updateNofGenes（阈值）{
直方图。forEach（函数（直方图）{
直方图。加载基因（阈值）；
});
}
函数buildPlots（）{
变量$histogramContainer=$（“#样本直方图”）；
直方图.forEach（函数（直方图，索引）{
var elementId=“样本直方图-”+索引；
$（document.createElements（'http://www.w3.org/2000/svg“，”svg'））
.css({
宽度：“200px”，
高度：“200px”，
显示：“内联块”
})
.attr（'id'，elementId）
.附录（$HistorogramContainer）；
plotSampleHistogram（histogram.title、histogram.nofgenes、histogram.dataset、“#”+elementId）；
});
}
函数图样本直方图（标题、nof_基因、数据集、targetElement）{
var xScale=new Plottable.Scales.Category（），
yScale=新的绘图表.Scales.Linear（），
colorScale=新的Plottable.Scales.Color（）；
var gene_count=nof_genes._data.toString（）.concat（“基因”）；
var xAxis=新的绘图仪.Axes.Category（xScale，“底部”），
yAxis=新绘图仪.Axes.Numeric（yScale，“左”），
titleLabel=新绘图仪.组件.titleLabel（标题），
nofGeneLabel=新的Plottable.Components.AxisLabel（基因计数）；
xAxis.tickLabelAngle（-90）
yScale.domainMin（0）；
var plot=新的Plottable.Plots.Bar（）
.addDataset（数据集）
.x（函数（d）{return d.celltype；}，xScale）
.y（函数（d）{返回d.score；}，yScale）
.attr（“fill”，函数（d）{return d.celltype；}，colorScale）
.attr（“qtip2 title”，函数（d）{return'+d.celltype+”（“+d.score.toFixed（2）+'）；}）
.addClass（“工具剪裁”）；
新建Plottable.Components.Table([
[空，标题标签]，
[null，nofGeneLabel]，
[y]
load_nof_genes: function (threshold) {
                        this.axisLabel.text(this.nofGenesByThreshold[threshold] + 'genes');
                    },

 new Plottable.Components.Table([
        [null, titleLabel],
        [null, histogram.axisLabel],
        [yAxis, plot],
        [null, xAxis]
    ]).renderTo(targetElement);