Pviz Html文件在本地打开时显示正确的图形，但在服务器上没有显示图形
Pviz Html文件在本地打开时显示正确的图形，但在服务器上没有显示图形
提问于 2019-06-25 23:50:29
我正在创建一个网站，并希望显示一个基于蛋白质序列的用户输入的图像。我正在使用genentech Pviz GitHub来帮助我创建图形，并从他们的网站复制了一个示例。它工作得很好，当我在PyCharm中打开它时，它会显示正确的图像和图形，但当我在views.py中将它作为模板打开时，它却不能。
<html>
<head>
<title>pViz.js different track heights</title>
<link rel="stylesheet" type="text/css" href="deps/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="deps/pviz-core.css">
<script src="deps/pviz-bundle.min.js"></script>
<!-- just a few lines of javscript to decorate the page -->
<script src="examples-utils.js"></script>
<style type="text/css" media="screen" class='example'>
g.feature rect.coverage_bar.psm_coverage {
fill: blue;
fill-opacity: 0.4;
}
g.feature rect.coverage_bar.psm_no_coverage {
fill: red;
fill-opacity: 0.4;
}
</style>
</head>
<body class="container">
<div class="row">
<h2>pViz with different track heights example</h2>
</div>
<div id="main" class="row"></div>
<div class="row">
<h3>Comments</h3>
</div>
<script class="example">
var pviz = this.pviz;
var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNAS';
var seqEntry = new pviz.SeqEntry({
sequence : seq
});
/**
* attach a track height ratio to the category (1 is the default)
*/
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms = 0.2;
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms_coverage = 3;
pviz.FeatureDisplayer.setStrikeoutCategory('oups');
new pviz.SeqEntryAnnotInteractiveView({
model : seqEntry,
el : '#main'
}).render();
pviz.FeatureDisplayer.setCustomHandler(['psm_coverage', 'psm_no_coverage'], {
appender : function(viewport, svgGroup, features, type) {
var sel = svgGroup.selectAll("g.feature.internal.data." + type).data(features).enter().append("g").attr("class", "feature internal data " + type)
sel.append("rect").attr('class', function(ft) {
return 'coverage_bar ' + ft.type
})
return sel;
},
positioner : function(viewport, d3selection) {
// d3selection.attr('transform', function(ft, i) {
// return 'translate(' + + ',' + viewport.scales.y(ft.displayTrack) + ')';
// });
var w1 = viewport.scales.x(10) - viewport.scales.x(9);
var hMax = viewport.scales.y(1) * pviz.FeatureDisplayer.heightFactor('psms_coverage');
d3selection.selectAll("rect.coverage_bar.psm_coverage").attr('height', function(ft) {
return ft.coverage * hMax;
})
d3selection.selectAll("rect.coverage_bar.psm_no_coverage").attr('height', hMax);
d3selection.selectAll("rect.coverage_bar").attr('x', function(ft) {
return viewport.scales.x(ft.start - 0.5);
}).attr('width', function(ft) {
return viewport.scales.x(ft.start + 0.5) - viewport.scales.x(ft.start - 0.5);
});
return d3selection
}
});
var fts = [[0, 30], [3, 15], [10, 16], [2, 8], [35, 50], [60, 69], [60, 65], [60, 62], [61, 62], [4, 15], [7, 15], [62, 69], [40, 50], [9, 15]];
seqEntry.addFeatures(fts.map(function(ft) {
return {
//we could also use te categoryType property, for height purpose, but not grouping purpose
category : 'psms',
type : 'psm',
start : ft[0],
end : ft[1],
text : ''
}
}));
/*
* now we just compute the coverage by counting how many psms cover each amino acid
*/
var coverage = []
for ( i = 0; i < seqEntry.length(); i++) {
coverage[i] = 0;
}
var max = 0;
fts.forEach(function(ft) {
for ( i = ft[0]; i <= ft[1]; i++) {
coverage[i]++;
max = Math.max(coverage[i], max)
}
});
/*
* and ad new features for that
*/
seqEntry.addFeatures(coverage.map(function(c, i) {
return {
category : 'psms_coverage',
type : (c == 0) ? 'psm_no_coverage' : 'psm_coverage',
start : i,
end : i,
text : c,
coverage : c / max
}
}));
seqEntry.addFeatures({
category : 'oups',
type : 'oups',
start : 10,
end : 40,
text : 'oups'
});
</script>
</body>
</html>[25/Jun/2019 15:34:10] "GET /protein/examples-utils.js HTTP/1.1" 404 2873
[25/Jun/2019 15:34:54] "POST /protein/ HTTP/1.1" 200 5136
Not Found: /protein/deps/pviz-bundle.min.js
[25/Jun/2019 15:34:54] "GET /protein/deps/pviz-bundle.min.js HTTP/1.1" 404 2891
Not Found: /protein/deps/bootstrap.min.css
[25/Jun/2019 15:34:54] "GET /protein/deps/bootstrap.min.css HTTP/1.1" 404 2888
Not Found: /protein/examples-utils.js
[25/Jun/2019 15:34:54] "GET /protein/examples-utils.js HTTP/1.1" 404 2873
Not Found: /protein/deps/pviz-core.css
[25/Jun/2019 15:34:54] "GET /protein/deps/pviz-core.css HTTP/1.1" 404 2876
Not Found: /protein/examples-utils.js
[25/Jun/2019 15:34:54] "GET /protein/examples-utils.js HTTP/1.1" 404 2873我有图像显示的结果，但我不知道如何提交这些。基本上应该有一个标题，下面有一个图形，但只有标题和页脚显示出来。基本上忽略了真正重要的图表。
为什么当我在视图中调用它时，网页会发生变化，而当我直接打开时，网页会发生变化？
正如我在另一个问题中所说的那样。我想为PVIZ创建一个标签，因为我找不到太多关于堆栈溢出的信息，因为它没有通用的标签。github链接是：https://github.com/Genentech/pviz
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-26 05:05:47
我找了大约3个小时，终于发现了我的错误。原来静态css和JS文件的路径被放到了错误的文件夹中，其名称与我原以为的文件夹名称相同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56757823
复制相关文章
相似问题