Javascript 如何使qtip2响应动态用户输入

我有以下工作代码。它获取输入数据并根据

阈值显示直方图


“严格使用”；
var直方图，
阈值=[]；
变量输入_数据=[{
“门槛”：1.5，
“直方图”：[{
“样本”：“样本1”，
“价值观”：[{
“得分”：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”，
“价值观”：[{
“分数”：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（），
dataByThreshold:{}，
加载：功能（阈值）{
this.dataset.data（this.dataByThreshold[threshold]）；
}
};
});
data.forEach（函数（数据）{
var阈值=data.threshold；
阈值。推送（阈值）；
数据.直方图.forEach（函数（直方图，i）{
直方图[i].dataByThreshold[threshold]=直方图.values；
});
});
//这里我们推广了滑动条最大阈值
$（'#threshold'）.attr（'max'，thresholds.length-1）；
更新的数据集（阈值[0]）；
buildPlots（）；
updateThreshold（）；
}
$（“#阈值”）.change（updateThreshold）；
函数updateThreshold（）{
//这是用户输入更新滑块的位置
//发生在QTIP运行的位置。
var thresholdinex=parseInt（$（'#threshold'）.val（），10）；
$（“#foldchange_threshold”）.html（thresholds[thresholdIndex]）；
更新的数据集（阈值[thresholdIndex]）；
$（“.tooltipped rect”）.qtip({
改写：对，
职位：{
我的：“中底”，
在“中上”
},
风格：{
课程：“qtip灯”
}
});
}
函数更新数据集（阈值）{
直方图。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.dataset，#'+elementId）；
});
}
函数plotSampleHistogram（标题、数据集、targetElement）{
var xScale=new Plottable.Scales.Category（），
yScale=新的绘图表.Scales.Linear（），
colorScale=新的Plottable.Scales.Color（）；
var xAxis=新绘图仪.Axes.Numeric（xScale，“底部”），
yAxis=新绘图仪.Axes.Numeric（yScale，“左”），
titleLabel=新绘图仪.Components.titleLabel（标题）；
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（“title”，函数（d）{return'+d.celltype+”（“+d.score.toFixed（2）+'）；}）
.addClass（“工具剪裁”）；
新建Plottable.Components.Table([
[空，标题标签]，
[yAxis，plot]，
[null，xAxis]
]).renderTo（targetElement）；
}
函数drawHistorogramleGend（targetElement）{
新绘图仪.组件.图例（彩色比例）
.renderTo（targetElement）；
}



看起来QTip2以某种方式修改了
“title”
属性，在
“oldtitle”
下缓存以前的信息。我通过将标题切换到另一个属性来实现：

（注意使用
.content
以避免选择不需要的矩形）

另外，我注意到当前的
xAxis
是一个
Axes.Numeric
，它不适用于
Scales.Category
。使用轴。类别

“严格使用”；
var直方图，
阈值=[]；
变量输入_数据=[{
“门槛”：1.5，
“直方图”：[{
“样本”：“样本1”，
“价值观”：[{
“得分”：6.7530200000000002，
“单元类型”：“B单元”
}, {
“分数”：11.432763461538459，
“细胞类型”：“树状细胞”
}, {
“分数”：25.823089615384621，
“细胞类型”：“巨噬细胞”
}, {
“分数”：9.9911211538461551，
“celltype”：“gdTCells”
}, {
“分数”：7.817228076923076，
“细胞类型”：“干细胞”
}, {
“分数”：17.482806923076922，
“细胞类型”：“基质”
plot.attr("qtip2-title", function(d) {
  return '<div class="bartip">' + d.celltype + " (" + d.score.toFixed(2) + ') </div>';
});

$(".tooltipped .content rect").qtip({

  // ... other setup here...

  content: {
    text: function() {
      return $(this).attr("qtip2-title");
    }
  }
});