我想使用Plotly.js为https://distill.pub/guide/上的出版物准备一个图。
一切正常，直到我在Distill（https://distill.pub/template.v1.js）上添加处理布局的脚本，然后所有图形均显示不正确：
现在是： wrong - SVGs below each other
我在浏览器中检查了页面，发现Plotly生成了两个应该重叠的SVG（<svg class="main-svg">）。如果添加Distill脚本，SVG似乎保持不变，但现在不再显示在彼此之上（重叠）。
有人知道如何解决此问题或解决此问题的方法吗？
提前谢谢！
这是html代码：
<head>
<script src="https://distill.pub/template.v1.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var trace1 = {
x: [2, 8],
y: [0.25, 6],
text: ['filled triangle', 'Cubic Bezier Curves'],
mode: 'text'
};
var layout = {
title: 'Basic Arbitrary SVG Paths',
xaxis: {
range: [0, 9],
zeroline: false
},
yaxis: {
range: [0, 11],
showgrid: false
},
width: 500,
height: 500,
shapes: [
//Cubic Bezier Curves
{
type: 'path',
path: 'M 1,4 C 2,8 6,4 8,8',
line: {
color: 'rgb(207, 114, 255)'
}
},
//Filled Triangle
{
type: 'path',
path: 'M 1 1 L 1 3 L 4 1 Z',
fillcolor: 'rgba(44, 160, 101, 0.5)',
line: {
color: 'rgb(44, 160, 101)'
}
}
]
};
var data = [trace1];
function start() {
Plotly.newPlot("graph", data, layout);
}
</script>
</head>
<body onload="start()">
<div id="graph"></div>
</body>
如果我创建的HTML页面不包含任何Plotly函数，而仅包含两个SVG路径（由Plotly创建-从浏览器复制），然后又一个< / p>
因此，基本上，plotly脚本中的某些内容使SVG可以按预期进行叠加（但我不知道在哪里以及在什么地方），并且Distill脚本中的某些内容似乎可以使它消失：
<!DOCTYPE html>
<html>
<head>
<!-- deactivating this out breaks it-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!--activating this breaks it, too-->
<!--<script src="https://distill.pub/template.v1.js"></script>-->
</head>
<body>
<div id="graph" class="js-plotly-plot">
<div class="plot-container plotly">
<div class="svg-container" style="position: relative; width: 500px; height: 500px;">
<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
<g class="cartesianlayer">
<!--text annotations-->
<g class="plot" transform="translate(80, 100)" clip-path="url(#clipb71614xyplot)"><g class="scatterlayer mlayer"><g class="trace scatter trace365c60" style="stroke-miterlimit: 2; opacity: 1;"><g class="points">
<g class="textpoint" transform="translate(0,3)"><text x="75.56" y="312.73" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="filled triangle" data-math="N" text-anchor="middle">filled triangle</text></g>
<g class="textpoint" transform="translate(0,3)"><text x="302.22" y="145.45" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="Cubic Bezier Curves" data-math="N" text-anchor="middle">Cubic Bezier Curves</text></g>
</g></g></g></g>
<!-- numbers x-axis -->
<g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="0" data-math="N" transform="translate(80,0)">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="2" data-math="N" transform="translate(155.56,0)">2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="4" data-math="N" transform="translate(231.11,0)">4</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="6" data-math="N" transform="translate(306.66999999999996,0)">6</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="8" data-math="N" transform="translate(382.22,0)">8</text></g></g>
<!--numbers y-axis-->
<g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="0" data-math="N" transform="translate(0,420)">0</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="2" data-math="N" transform="translate(0,361.82)">2</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="4" data-math="N" transform="translate(0,303.64)">4</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="6" data-math="N" transform="translate(0,245.45)">6</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="8" data-math="N" transform="translate(0,187.26999999999998)">8</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="10" data-math="N" transform="translate(0,129.09)">10</text></g></g>
</g>
</svg>
<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<!-- paths/shapes -->
<g class="layer-above">
<g class="shapelayer">
<path data-index="0" fill-rule="evenodd" d="M 117.78,303.64 C 155.56,187.26999999999998 306.66999999999996,303.64 382.22,187.26999999999998" style="opacity: 1; stroke: rgb(207, 114, 255); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-width: 2px;" clip-path="url(#clipb71614xy)"></path>
<path data-index="1" fill-rule="evenodd" d="M 117.78 390.91 L 117.78 332.73 L 231.11 390.91 Z" style="opacity: 1; stroke: rgb(44, 160, 101); stroke-opacity: 1; fill: rgb(44, 160, 101); fill-opacity: 0.5; stroke-width: 2px;" clip-path="url(#clipb71614xy)">
</path>
</g>
</g>
<!-- title -->
<g class="infolayer"><g class="g-gtitle"><text class="gtitle" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="250" y="50" text-anchor="middle" data-unformatted="Basic Arbitrary SVG Paths" data-math="N">Basic Arbitrary SVG Paths</text></g><g class="g-xtitle"></g>
<g class="g-ytitle"></g>
</g>
</svg>
</div>
</div>
</div>
</body>
</html>
我也在community.plot.ly上问了这个问题，但是还没有收到任何答案。如果在那里找到解决方案，我将在这里更新。