Question

我正在使用genentech / pviz github显示蛋白质和肽。我没有足够的代表来创建新标签，但我认为制作与该github相关的pviz标签是一个好主意：https://github.com/Genentech/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部分的内容。我希望这是有道理的，但我怀疑许多人将需要帮助。我在网上找不到任何东西。：（

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

1 个答案: