Question

我几天来一直在努力解决这个问题，这让我很困惑。希望JQuery熟练的人可以提供帮助。

这与用于创建交互式热图的非常强大且漂亮的javascript库有关。 http://jheatmap.github.io/jheatmap/。我正在修改其中一个示例 - 快速入门 - 以便在页面上显示多个热图。我们的想法是将热图放在单独的选项卡上，并通过单击特定选项卡激活热图。该工具无法自然地执行此操作，而是仅在每个html页面上显示一个热图。开发人员提出了一个解决方案，但问题在于此。

在此示例代码中，我打算在三个选项卡上显示三个热图（称为heatmap1，heatmap2和heatmap3）。目前的情况是，在点击heatmap2或heatmap3的标签之前，我必须先点击heatmap1的标签。由于hotmap1默认显示，所以当页面最初启动时，我可以继续点击tab for heatmap2，这很好。但是现在如果我想显示heatmap3，我必须返回点击heatmap1的标签，然后点击heatmap3的标签。在我设法使用此技巧查看heatmap3后，我需要再次单击heatmap1的选项卡以显示heatmap2。似乎必须在显示任何其他热图之前显示heatmap1。

由于我的帐户不允许我附加文件，因此我将代码放在下面。这是对Jheatmap的QuickStart step4代码的直接修改。您将无法运行它，因为脚本加载/读取文本文件。但是如果你能看看三个热图周围的javascript以及渲染对象的html代码，我将不胜感激。我认为JQuery熟练的人可以给我一些关于如何修复bug的建议。

非常感谢你的帮助。

<!DOCTYPE html>
<html>
<head>
    <title>jHeatmap</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="prettify.css" rel="stylesheet" type="text/css">

    <link href="../../styles/jheatmap-1.0.0.css" rel="stylesheet" type="text/css"/>
    <style>
            /* To center the heatmap */
        table.heatmap {
            margin: 0px auto;
        }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script src="../../scripts/jheatmap-1.0.0.js" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

         /* heatmap1 */
         $('#heatmap1').heatmap(
            {
                data: {
                    rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
                    cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
                    values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
                },

                init: function (heatmap) {

                    // Column annotations
                    heatmap.cols.decorators["subtype2"] = new jheatmap.decorators.CategoricalRandom();
                    heatmap.cols.annotations = ["subtype"];

                    // Rows annotations
                    heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
                    heatmap.rows.annotations = ["fm-bias"];

                    // Aggregators
                    heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
                    heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
                    heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();

                    // Decorators
                    heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
                                    values: ["0","1"],
                                    colors : ["white","green"]
                    });

                    heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
                                    values: ["-2","2"],
                                    colors : ["blue","red"]
                    });

                    heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
                                    minValue: -2,
                                    midValue: 0,
                                    maxValue: 2,
                                    minColor: [85, 0, 136],
                                    nullColor: [255,255,255],
                                    maxColor: [255, 204, 0],
                                    midColor: [240,240,240]
                    });

                }
            });

         /* heatmap2 */
         $('#myTab a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');

                // Load Heatmap2 
                if ($(this).tab()[0].hash == '#heatmap2Tab') {
                    $('#heatmap-loader').show();
                    $('#heatmap2').width($('#heatmap').width());
                    $('#heatmap2').heatmap(
                    {
                        data: {
                            rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
                            cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
                            values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
                        },

                        init: function (heatmap) {

                            // Column annotations
                            heatmap.cols.decorators["subtype"] = new jheatmap.decorators.CategoricalRandom();
                            heatmap.cols.annotations = ["subtype"];

                            // Rows annotations
                            heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
                            heatmap.rows.annotations = ["fm-bias"];

                            // Aggregators
                            heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
                            heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
                            heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();

                            // Decorators
                            heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
                                            values: ["0","1"],
                                            colors : ["white","green"]
                            });

                            heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
                                            values: ["-2","2"],
                                            colors : ["blue","red"]
                            });

                            heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
                                            minValue: -2,
                                            midValue: 0,
                                            maxValue: 2,
                                            minColor: [85, 0, 136],
                                            nullColor: [255,255,255],
                                            maxColor: [255, 204, 0],
                                            midColor: [240,240,240]
                            });

                        }
                    });
                }

          })

         /* heatmap3 */
         $('#myTab a').click(function (e) {
             e.preventDefault();
             $(this).tab('show');

             // Load Heatmap2 
             if ($(this).tab()[0].hash == '#heatmap3Tab') {
                 $('#heatmap-loader').show();
                 $('#heatmap3').width($('#heatmap').width());
                 $('#heatmap3').heatmap(
                 {
                     data: {
                         rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
                         cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
                         values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
                     },

                     init: function (heatmap) {

                         // Column annotations
                         heatmap.cols.decorators["subtype"] = new jheatmap.decorators.CategoricalRandom();
                         heatmap.cols.annotations = ["subtype"];

                         // Rows annotations
                         heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
                         heatmap.rows.annotations = ["fm-bias"];

                         // Aggregators
                         heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
                         heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
                         heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();

                         // Decorators
                         heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
                             values: ["0", "1"],
                             colors: ["white", "green"]
                         });

                         heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
                             values: ["-2", "2"],
                             colors: ["blue", "red"]
                         });

                         heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
                             minValue: -2,
                             midValue: 0,
                             maxValue: 2,
                             minColor: [85, 0, 136],
                             nullColor: [255, 255, 255],
                             maxColor: [255, 204, 0],
                             midColor: [240, 240, 240]
                         });

                     }
                 });
             }

         })


    });</script>
</head>
<body>

<div class="container">
    <div class="row">
        <ul class="nav nav-pills">
            <li><a href="step0.html">Step 0</a></li>
            <li><a href="step1.html">Step 1</a></li>
            <li><a href="step2.html">Step 2</a></li>
            <li><a href="step3.html">Step 3</a></li>
            <li class="active"><a href="step4.html">Step 4</a></li>
            <li><a href="step5.html">Step 5</a></li>
        </ul>
        <p>
           Add column and row annotation headers.
        </p>
    </div>

    <div class="row">
        <div id="heatmap-loader">
            <div class="background"></div>
            <div class="loader">
                <img src="../../images/loading.gif">
            </div>
        </div>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#heatmap1Tab" data-toggle="tab">Heatmap1</a></li>
            <li><a href="#heatmap2Tab" data-toggle="tab">Heatmap2</a></li>
            <li><a href="#heatmap3Tab" data-toggle="tab">Heatmap3</a></li>
            <li><a href="#javascriptTab" data-toggle="tab">Javascript</a></li>
            <li><a href="#dataTab" data-toggle="tab">quickstart-data.tsv</a></li>
            <li><a href="#cdataTab" data-toggle="tab">quickstart-cols.tsv</a></li>
            <li><a href="#rdataTab" data-toggle="tab">quickstart-rows.tsv</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="heatmap1Tab" style="">
                <div id="heatmap1"></div>
            </div>

            <div class="tab-pane fade" id="heatmap2Tab" style="">
                <div id="heatmap2" style="width:100%;"></div>
            </div>

            <div class="tab-pane fade" id="heatmap3Tab" style="">
                <div id="heatmap3" style="width:100%;"></div>
            </div>

            <div class="tab-pane fade" id="javascriptTab">
                <pre id="source" class="prettyprint linenums"></pre>
            </div>

            <div class="tab-pane fade" id="dataTab">
                <pre id="data" class="prettyprint"></pre>
            </div>

            <div class="tab-pane fade" id="cdataTab">
                <pre id="cdata" class="prettyprint"></pre>
            </div>

            <div class="tab-pane fade" id="rdataTab">
                <pre id="rdata" class="prettyprint"></pre>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="prettify.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<script>
    var source = document.getElementsByTagName('script')[2].innerHTML;
    source = source.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    $('#source').html(source);
    window.prettyPrint && prettyPrint();

    $('#source ol.linenums li').each(function(idx, li) {
        if ((idx > 3 && idx < 6) || (idx > 10 && idx < 18)) {
            $(li).css("background-color", "#FFFFB3");
        }
    });

    jQuery.ajax({

        url: "quickstart-data.tsv",

        dataType: "text",

        success: function (file) {
            $('#data').html(file);
        }
    });

    jQuery.ajax({

        url: "quickstart-cols.tsv",

        dataType: "text",

        success: function (file) {
            $('#cdata').html(file);
        }
    });

    jQuery.ajax({

        url: "quickstart-rows.tsv",

        dataType: "text",

        success: function (file) {
            $('#rdata').html(file);
        }
    });

</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-7336589-2', 'jheatmap.github.io');
  ga('send', 'pageview');

</script>

</body>
</html>

Answer 1

我认为您的代码中的主要问题是您将两个函数绑定到所有单击选项卡事件。您只需要绑定一个函数，此函数将只绘制一个热图，具体取决于所单击的链接。

这里有一个简化版本，可以在不同的标签上绘制三个热图：

<html>
 <head>
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
     <link href="http://jheatmap.github.io/jheatmap/css/jheatmap-1.0.0-min.css" rel="stylesheet" type="text/css"/>
     <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
     <script src="http://jheatmap.github.io/jheatmap/js/jheatmap-1.0.0-min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
     <script>  
     var draw_heatmap = function (tag_id) {
                $('#'+tag_id).heatmap({
                data: {
                    values: new jheatmap.readers.TableHeatmapReader({ url: "http://jheatmap.github.io/jheatmap/examples/quickstart/quickstart-data.tsv" })
                }});        
     };

     $(document).ready(function () {

         /* Draw the default visible heatmap */
         draw_heatmap('heatmap1');

         /* Calculate the visible heatmap width */
         var heatmap_width = $('#heatmap1').width();

         /* Fix the width to all the heatmaps */
         $('#heatmap1').width(heatmap_width);
         $('#heatmap2').width(heatmap_width);
         $('#heatmap3').width(heatmap_width);

         /* Attach draw heatmap to tab click event */
         $('#myTab a').click(function (e) {
                e.preventDefault();

                /* Show the clicked tab */
                $(this).tab('show');

                /* Show the loader indicator */
                $('#heatmap-loader').show();

                /* Draw the correct heatmap */
                if ($(this).tab()[0].hash == '#heatmap1Tab') {
                    draw_heatmap('heatmap1');
                }

                if ($(this).tab()[0].hash == '#heatmap2Tab') {
                    draw_heatmap('heatmap2');
                }

                if ($(this).tab()[0].hash == '#heatmap3Tab') {
                    draw_heatmap('heatmap3');
                }
          });
    });
    </script>
 </head>
 <body>    
  <div class="container">
    <div class="row">
        <div id="heatmap-loader">
            <div class="background"></div>
            <div class="loader">
                <img src="http://jheatmap.github.io/jheatmap/images/loading.gif">
            </div>
        </div>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#heatmap1Tab" data-toggle="tab">Heatmap1</a></li>
            <li><a href="#heatmap2Tab" data-toggle="tab">Heatmap2</a></li>
            <li><a href="#heatmap3Tab" data-toggle="tab">Heatmap3</a></li>           
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="heatmap1Tab">
                <div id="heatmap1"></div>
            </div>

            <div class="tab-pane fade" id="heatmap2Tab">
                <div id="heatmap2"></div>
            </div>

            <div class="tab-pane fade" id="heatmap3Tab">
                <div id="heatmap3"></div>
            </div>
        </div>
    </div>
  </div>
 </body>
</html>

jHeatmap Javascript库选项卡的行为很奇怪

1 个答案: