javascript - 如何在Javascript Plottable.js下使用独立比例制作两个直方图

Question

我有以下代码。如果你点击运行按钮你会发现两个并排直方图。

但是两者的规模不同。第一个面板的比例为 10^80和另一个0 到1。现在，我怎样才能让面板 1 显示该值在 y 轴上。它是隐藏的，因为它对两个面板使用相同的比例。

"use strict";

var histograms,
  thresholds = [];

var input_data = [
    {
        "threshold": 1.5, 
        "histograms": [
            {
                "sample": "Sample1", 
                "nof_genes": 19129, 
                "values": [
                    {
                        "score": 5.2839221064745636e+81, 
                        "celltype": "Bcells"
                    }, 
                    {
                        "score": 2.872412166929766e+81, 
                        "celltype": "DendriticCells"
                    }, 
                    {
                        "score": 4.82196178030352e+82, 
                        "celltype": "Macrophages"
                    }, 
                    {
                        "score": 3.0208554096649809e+81, 
                        "celltype": "Monocytes"
                    }, 
                    {
                        "score": 4.3508855197536809e+81, 
                        "celltype": "NKCells"
                    }, 
                    {
                        "score": 1.5968403865969863e+81, 
                        "celltype": "Neutrophils"
                    }, 
                    {
                        "score": 1.3068775298727331e+81, 
                        "celltype": "StemCells"
                    }, 
                    {
                        "score": 3.2760591738950675e+81, 
                        "celltype": "StromalCells"
                    }, 
                    {
                        "score": 4.3269886854125076e+81, 
                        "celltype": "abTcells"
                    }, 
                    {
                        "score": 2.3123698863774207e+81, 
                        "celltype": "gdTCells"
                    }
                ]
            }, 
            {
                "sample": "Sample2", 
                "nof_genes": 18438, 
                "values": [
                    {
                        "score": 0.023526831259537202, 
                        "celltype": "Bcells"
                    }, 
                    {
                        "score": 0.031062202944392724, 
                        "celltype": "DendriticCells"
                    }, 
                    {
                        "score": 0.50894644580920867, 
                        "celltype": "Macrophages"
                    }, 
                    {
                        "score": 0.042631083422661434, 
                        "celltype": "Monocytes"
                    }, 
                    {
                        "score": 0.025050910895619175, 
                        "celltype": "NKCells"
                    }, 
                    {
                        "score": 0.049479227373385677, 
                        "celltype": "Neutrophils"
                    }, 
                    {
                        "score": 0.024014917699970516, 
                        "celltype": "StemCells"
                    }, 
                    {
                        "score": 0.09955841150737077, 
                        "celltype": "StromalCells"
                    }, 
                    {
                        "score": 0.024245068851487257, 
                        "celltype": "abTcells"
                    }, 
                    {
                        "score": 0.024223805083276869, 
                        "celltype": "gdTCells"
                    }
                ]
            }, 
        ]
    }, 
    {
        "threshold": 2, 
        "histograms": [
            {
                "sample": "Sample1", 
                "nof_genes": 19129, 
                "values": [
                    {
                        "score": 1.2839221064745636e+81, 
                        "celltype": "Bcells"
                    }, 
                    {
                        "score": 1.872412166929766e+81, 
                        "celltype": "DendriticCells"
                    }, 
                    {
                        "score": 4.82196178030352e+82, 
                        "celltype": "Macrophages"
                    }, 
                    {
                        "score": 3.0208554096649809e+81, 
                        "celltype": "Monocytes"
                    }, 
                    {
                        "score": 1.3508855197536809e+81, 
                        "celltype": "NKCells"
                    }, 
                    {
                        "score": 3.5968403865969863e+81, 
                        "celltype": "Neutrophils"
                    }, 
                    {
                        "score": 1.3068775298727331e+81, 
                        "celltype": "StemCells"
                    }, 
                    {
                        "score": 8.2760591738950675e+81, 
                        "celltype": "StromalCells"
                    }, 
                    {
                        "score": 1.3269886854125076e+81, 
                        "celltype": "abTcells"
                    }, 
                    {
                        "score": 1.3123698863774207e+81, 
                        "celltype": "gdTCells"
                    }
                ]
            }, 
            {
                "sample": "Sample2", 
                "nof_genes": 18438, 
                "values": [
                    {
                        "score": 0.013526831259537202, 
                        "celltype": "Bcells"
                    }, 
                    {
                        "score": 0.021062202944392724, 
                        "celltype": "DendriticCells"
                    }, 
                    {
                        "score": 0.20894644580920867, 
                        "celltype": "Macrophages"
                    }, 
                    {
                        "score": 0.042631083422661434, 
                        "celltype": "Monocytes"
                    }, 
                    {
                        "score": 0.025050910895619175, 
                        "celltype": "NKCells"
                    }, 
                    {
                        "score": 0.049479227373385677, 
                        "celltype": "Neutrophils"
                    }, 
                    {
                        "score": 0.024014917699970516, 
                        "celltype": "StemCells"
                    }, 
                    {
                        "score": 0.09955841150737077, 
                        "celltype": "StromalCells"
                    }, 
                    {
                        "score": 0.024245068851487257, 
                        "celltype": "abTcells"
                    }, 
                    {
                        "score": 0.024223805083276869, 
                        "celltype": "gdTCells"
                    }
                ]
            }, 
        ]
    }, 
];



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>

Answer 1

我认为您不应该对两者使用相同的比例。

可绘制比例是像素和数据域之间的关系。

如果这两个图具有相同的像素高度，但域不同，则它们需要不同的比例。