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

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

如果你运行下面的代码，代码正在工作，直到拖动滑动条时直方图发生变化。

然而，当我们将阈值从1.5拖动到2时，标签26 GENES不会改变。我期望值更改为30 GENES 。 这些值在var input_data中编码，尤其是nof_genes 。

我怎样才能让它生效？

 "use strict"; var histograms, thresholds = []; var input_data = [{ "threshold": 1.5, "histograms": [{ "sample": "Sample1", "nof_genes": 26, "values": [{ "score": 6.7530200000000002, "celltype": "Bcells" }, { "score": 11.432763461538459, "celltype": "DendriticCells" }, { "score": 25.823089615384621, "celltype": "Macrophages" }, { "score": 9.9911211538461551, "celltype": "gdTCells" }, { "score": 7.817228076923076, "celltype": "StemCells" }, { "score": 17.482806923076922, "celltype": "StromalCells" }, { "score": 29.335427692307697, "celltype": "Monocytes" }, { "score": 28.914959615384621, "celltype": "Neutrophils" }, { "score": 13.818888461538467, "celltype": "NKCells" }, { "score": 9.5030688461538464, "celltype": "abTcells" }] }] }, { "threshold": 2, "histograms": [{ "sample": "Sample1", "nof_genes": 30, "values": [{ "score": 5.1335499999999996, "celltype": "Bcells" }, { "score": 16.076072499999999, "celltype": "DendriticCells" }, { "score": 46.182032499999998, "celltype": "Macrophages" }, { "score": 6.5895700000000001, "celltype": "gdTCells" }, { "score": 5.3218800000000002, "celltype": "StemCells" }, { "score": 53.643625, "celltype": "StromalCells" }, { "score": 85.1618225, "celltype": "Monocytes" }, { "score": 55.559129999999996, "celltype": "Neutrophils" }, { "score": 7.6717524999999984, "celltype": "NKCells" }, { "score": 6.3277800000000006, "celltype": "abTcells" }] }] }]; processData(input_data); function processData(data) { histograms = data[0].histograms.map(function(data) { return { title: data.sample, dataset: new Plottable.Dataset(), nofgenes: new Plottable.Dataset(), dataByThreshold: {}, nofGenesByThreshold: {}, load_nof_genes: function (threshold) { this.nofgenes.data(this.nofGenesByThreshold[threshold]); }, load: function(threshold) { this.dataset.data(this.dataByThreshold[threshold]); } }; }); data.forEach(function(data) { var threshold = data.threshold; thresholds.push(threshold); data.histograms.forEach(function(histogram, i) { histograms[i].dataByThreshold[threshold] = histogram.values; histograms[i].nofGenesByThreshold[threshold] = histogram.nof_genes; }); }); // Here we generalize the slide bar maximum threshold $('#threshold').attr('max', thresholds.length - 1); updateDatasets(thresholds[0]); updateNofGenes(thresholds[0]); buildPlots(); updateThreshold(); } $('#threshold').change(updateThreshold); function updateThreshold() { // This is where the user input updating slider // takes place and where the QTIP is in action. var thresholdIndex = parseInt($('#threshold').val(), 10); $("#foldchange_threshold").html(thresholds[thresholdIndex]); updateDatasets(thresholds[thresholdIndex]); updateNofGenes(thresholds[thresholdIndex]); $(".tooltipped .content rect").qtip({ overwrite: true, position: { my: "bottom middle", at: "top middle" }, style: { classes: "qtip-light" }, content: { text: function() { return $(this).attr("qtip2-title"); } } }); } function updateDatasets(threshold) { histograms.forEach(function(histogram) { histogram.load(threshold); }); } function updateNofGenes (threshold) { histograms.forEach(function (histogram) { histogram.load_nof_genes(threshold); }); } function buildPlots() { var $histogramContainer = $('#sample-histograms'); histograms.forEach(function(histogram, index) { var elementId = "sample-histogram-" + index; $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .css({ width: '200px', height: '200px', display: 'inline-block' }) .attr('id', elementId) .appendTo($histogramContainer); plotSampleHistogram(histogram.title,histogram.nofgenes, histogram.dataset, '#' + elementId); }); } function plotSampleHistogram(title, nof_genes, dataset, targetElement) { var xScale = new Plottable.Scales.Category(), yScale = new Plottable.Scales.Linear(), colorScale = new Plottable.Scales.Color(); var gene_count = nof_genes._data.toString().concat(" genes"); var xAxis = new Plottable.Axes.Category(xScale, "bottom"), yAxis = new Plottable.Axes.Numeric(yScale, "left"), titleLabel = new Plottable.Components.TitleLabel(title), nofGeneLabel = new Plottable.Components.AxisLabel(gene_count); xAxis.tickLabelAngle(-90) yScale.domainMin(0); var plot = new Plottable.Plots.Bar() .addDataset(dataset) .x(function(d) { return d.celltype; }, xScale) .y(function(d) { return d.score; }, yScale) .attr("fill", function(d) { return d.celltype; }, colorScale) .attr("qtip2-title", function(d) { return '
' + d.celltype + " (" + d.score.toFixed(2) + ') 
'; }) .addClass("tooltipped"); new Plottable.Components.Table([ [null, titleLabel], [null, nofGeneLabel], [yAxis, plot], [null, xAxis] ]).renderTo(targetElement); } function drawHistogramLegend(targetElement) { new Plottable.Components.Legend(colorScale) .renderTo(targetElement); } 

Answer 1

这是固定代码。 我改变的是直方图对象不将基因数量保存为Dataset ，而是保存AxisLabel对象。 有了它，更新标签只是意味着更新该标签的text() 。

最重要的部分是：

 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); 

PS我也改变了一下plotSampleHistogram如何接收参数 – 而不是通过histogram所有字段我直接传递对象。

 "use strict"; var histograms, thresholds = []; var input_data = [{ "threshold": 1.5, "histograms": [{ "sample": "Sample1", "nof_genes": 26, "values": [{ "score": 6.7530200000000002, "celltype": "Bcells" }, { "score": 11.432763461538459, "celltype": "DendriticCells" }, { "score": 25.823089615384621, "celltype": "Macrophages" }, { "score": 9.9911211538461551, "celltype": "gdTCells" }, { "score": 7.817228076923076, "celltype": "StemCells" }, { "score": 17.482806923076922, "celltype": "StromalCells" }, { "score": 29.335427692307697, "celltype": "Monocytes" }, { "score": 28.914959615384621, "celltype": "Neutrophils" }, { "score": 13.818888461538467, "celltype": "NKCells" }, { "score": 9.5030688461538464, "celltype": "abTcells" }] }] }, { "threshold": 2, "histograms": [{ "sample": "Sample1", "nof_genes": 30, "values": [{ "score": 5.1335499999999996, "celltype": "Bcells" }, { "score": 16.076072499999999, "celltype": "DendriticCells" }, { "score": 46.182032499999998, "celltype": "Macrophages" }, { "score": 6.5895700000000001, "celltype": "gdTCells" }, { "score": 5.3218800000000002, "celltype": "StemCells" }, { "score": 53.643625, "celltype": "StromalCells" }, { "score": 85.1618225, "celltype": "Monocytes" }, { "score": 55.559129999999996, "celltype": "Neutrophils" }, { "score": 7.6717524999999984, "celltype": "NKCells" }, { "score": 6.3277800000000006, "celltype": "abTcells" }] }] }]; processData(input_data); function processData(data) { histograms = data[0].histograms.map(function(data) { return { title: data.sample, dataset: new Plottable.Dataset(), axisLabel: new Plottable.Components.AxisLabel(), dataByThreshold: {}, nofGenesByThreshold: {}, load_nof_genes: function (threshold) { this.axisLabel.text(this.nofGenesByThreshold[threshold] + 'genes'); }, load: function(threshold) { this.dataset.data(this.dataByThreshold[threshold]); } }; }); data.forEach(function(data) { var threshold = data.threshold; thresholds.push(threshold); data.histograms.forEach(function(histogram, i) { histograms[i].dataByThreshold[threshold] = histogram.values; histograms[i].nofGenesByThreshold[threshold] = histogram.nof_genes; }); }); // Here we generalize the slide bar maximum threshold $('#threshold').attr('max', thresholds.length - 1); updateDatasets(thresholds[0]); updateNofGenes(thresholds[0]); buildPlots(); updateThreshold(); } $('#threshold').change(updateThreshold); function updateThreshold() { // This is where the user input updating slider // takes place and where the QTIP is in action. var thresholdIndex = parseInt($('#threshold').val(), 10); $("#foldchange_threshold").html(thresholds[thresholdIndex]); updateDatasets(thresholds[thresholdIndex]); updateNofGenes(thresholds[thresholdIndex]); $(".tooltipped .content rect").qtip({ overwrite: true, position: { my: "bottom middle", at: "top middle" }, style: { classes: "qtip-light" }, content: { text: function() { return $(this).attr("qtip2-title"); } } }); } function updateDatasets(threshold) { histograms.forEach(function(histogram) { histogram.load(threshold); }); } function updateNofGenes (threshold) { histograms.forEach(function (histogram) { histogram.load_nof_genes(threshold); }); } function buildPlots() { var $histogramContainer = $('#sample-histograms'); histograms.forEach(function(histogram, index) { var elementId = "sample-histogram-" + index; $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .css({ width: '200px', height: '200px', display: 'inline-block' }) .attr('id', elementId) .appendTo($histogramContainer); plotSampleHistogram(histogram, '#' + elementId); }); } function plotSampleHistogram(histogram, targetElement) { var xScale = new Plottable.Scales.Category(), yScale = new Plottable.Scales.Linear(), colorScale = new Plottable.Scales.Color(); var xAxis = new Plottable.Axes.Category(xScale, "bottom"), yAxis = new Plottable.Axes.Numeric(yScale, "left"), titleLabel = new Plottable.Components.TitleLabel(histogram.title); xAxis.tickLabelAngle(-90) yScale.domainMin(0); var plot = new Plottable.Plots.Bar() .addDataset(histogram.dataset) .x(function(d) { return d.celltype; }, xScale) .y(function(d) { return d.score; }, yScale) .attr("fill", function(d) { return d.celltype; }, colorScale) .attr("qtip2-title", function(d) { return '
' + d.celltype + " (" + d.score.toFixed(2) + ') 
'; }) .addClass("tooltipped"); new Plottable.Components.Table([ [null, titleLabel], [null, histogram.axisLabel], [yAxis, plot], [null, xAxis] ]).renderTo(targetElement); } function drawHistogramLegend(targetElement) { new Plottable.Components.Legend(colorScale) .renderTo(targetElement); }