我正在创建一个网站，并希望根据用户输入的蛋白质序列显示图像。我正在使用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
我在寻找大约3个小时后弄清楚了我的错误。事实证明，静态CSS和JS文件的路径是错误的文件夹，其名称与我认为它也是如此。