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

How to make label in histogram respond to dynamic user input

本文关键字:输入 用户 响应 动态 直方图 何使 标签      更新时间:2023-09-26

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

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

但是,当我们拖动阈值时,标签26 GENES不会改变从1.5到2。我希望值更改为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 '<div class="bartip">' + d.celltype + " (" + d.score.toFixed(2) + ') </div>'; })
      .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);
}
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
</head>
<body>
  <!-- Display the sliding bar -->
  <input id="threshold" type="range" min="0" max="1" step="1" value="0" />
  <br>
  <!-- Show foldchange threshold -->
  <div id="foldchange_threshold" style="display: inline-block; align:center;"></div>
  <!-- Show histograms -->
  <div id="sample-histograms"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>

</body>
</html>

以下是固定代码。我改变的是,直方图对象不包含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 '<div class="bartip">' + d.celltype + " (" + d.score.toFixed(2) + ') </div>'; })
      .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);
}
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
</head>
<body>
  <!-- Display the sliding bar -->
  <input id="threshold" type="range" min="0" max="1" step="1" value="0" />
  <br>
  <!-- Show foldchange threshold -->
  <div id="foldchange_threshold" style="display: inline-block; align:center;"></div>
  <!-- Show histograms -->
  <div id="sample-histograms"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>

</body>
</html>