在悬停时包含有关对象PVIZ的更多详细信息

Question

我正在使用genentech/pviz github来显示蛋白质和肽。我没有足够的代表来创建一个新的标签，但我认为创建一个与github：https://github.com/Genentech/pviz相关的pviz标签会是一个好主意。我已经经常使用这个github了，但是我在堆栈溢出上找不到太多关于它的信息，因为它没有标签。我已经得到了一个很好的图形，并在css部分使用了悬停功能来更改悬停时矩形的颜色。但是，当鼠标悬停在它上面时，我想另外显示有关肽和/或蛋白质的信息。

g.feature.psms.normal:hover rect.feature {
    fill: black;

}

  seqEntry.addFeatures(fts.map(function(ft) {
                return {
                    //we could also use te categoryType property, for height purpose, but not grouping purpose
                    category : 'psms',
                    type : ft[2], //This would be "normal" in most cases
                    start : ft[0],
                    end : ft[1],
                    text : '',
                }
            }));

我不确定如何显示信息，因为我找不到任何好的文档。当鼠标悬停在多肽矩形上时，如何显示文本？

Answer 1

我使用的功能是SVG矩形，在尝试了一段时间后，我找到了一个使用JS的解决方案。首先，在所需的特定特征类型上创建MouseoverCallback：

pviz.FeatureDisplayer.addMouseoverCallback(['normal', 'oxidize'], function(ft) {
                mouseOveredFT = ft;
                var el = $('#output-mouse-over');
                el.empty();
                el.html('<pre>' + "This peptide starts at: " + JSON.stringify(ft['start']) + ", ends at: " +
                JSON.stringify(ft['end']) + ", and has the sequence: " + JSON.stringify(ft['text']) + '</pre>')
            }).addMouseoutCallback(['normal', 'oxidize'], function(ft) {
                mouseOveredFT = undefined;

            });

el.html部件就是您要显示的内容。在创建SVG矩形之后，一定要添加：

 xChangeCallback : function(pStart, pEnd) {
                var str = 'cursor at ' + pStart.toFixed(1) + ' - ' + pEnd.toFixed(1);
                if (mouseOveredFT !== undefined) {
                    str += '<strong> -> on FT'
                }

                $('#output-x-change').html(str);
            }

然后在你的html文档中写下：

<div class="row">
            <div class="span2" >
                <strong>Information about peptide</strong>
            </div><div class="span10" id="output-mouse-over"></div>
        </div>
<!--        <div class="row">-->
<!--            <div class="span2" >-->
<!--                <strong>xchange</strong>-->
<!--            </div><div class="span10" id="output-x-change"></div>-->
<!--        </div>-->

我注释掉了第二部分，因为我不需要它，但第二部分允许您显示光标的位置。同时，第一部分显示了您在el.html部分中放入的内容。我希望这是有意义的，但我怀疑有多少人会在这方面需要帮助。我在网上没有找到任何关于这方面的信息。:(