如果我的 DOM 中有一个目标 div,例如
<div id="graph"></div>
我可以使用plotly在该div中创建一个绘图(完整的示例如下):
Plotly.newPlot('graph', data, layout);
这将在包含 svg 元素的 div 中创建一个嵌套结构。 在该 svg 元素中,有一个等高线图,由一些元素表示(请参见下面的 DOM 结构)。效果很好。
但是,我有一个已经存在的 svg 元素(使用 d3.js 创建),并且我想在我的目标 svg 组中包含来自plotly的等高线图:
<div id="myDiv">
<svg id = "mySvgElement">
...
<rect id="someExistingContent"></rect>
...
<g id = "targetGroupForPlotly"></g>
</svg>
</div>
是否可以告诉plotly.js使用现有的svg组而不是div元素?
好吧,作为一种丑陋的解决方法,我可以绘制到一个不可见的虚拟 div,然后使用 jquery 从那里复制内容,但也许有一些替代工作流程可以直接绘制到给定的目标 svg 组?
(我现有的 svg 元素中嵌套的 svg 元素也是一个选项)。
计数图示例
使用 https://cdn.plot.ly/plotly-latest.min.js
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
x: [-9, -6, -5 , -3, -1],
y: [0, 1, 4, 5, 7],
type: 'contour',
colorscale: 'Jet',
showscale: false,
autocontour: false,
contours: {
start: 0,
end: 8,
size: 0.4
}
}];
var layout = {
margin: {
b: 0,
l: 0,
r: 0,
t: 0
},
height: 600,
width: 600,
title: '',
xaxis: {
ticks: '',
showticklabels: false
},
yaxis: {
ticks: '',
showticklabels: false
}
};
Plotly.newPlot('graph', data, layout);
https://jsfiddle.net/tmLuj6uf/
DOM结构:
最佳答案
使用 JQuery 的复制解决方法似乎是最简单的解决方案:
Plotly.newPlot('graph', data, layout);
$('.contour').appendTo('#mySvgElement');
$('#graph').empty();
关于javascript - 如何将plotly.js应用到现有的svg组<g>作为目标而不是应用到目标<div>元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37443010/