javascript - 如何将plotly.js应用到现有的svg组<g>作为目标而不是应用到目标<div>元素?

标签 javascript d3.js svg plotly

如果我的 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结构:

DOM structure

最佳答案

使用 JQuery 的复制解决方法似乎是最简单的解决方案:

Plotly.newPlot('graph', data, layout);
$('.contour').appendTo('#mySvgElement');            
$('#graph').empty();

关于javascript - 如何将plotly.js应用到现有的svg组<g>作为目标而不是应用到目标<div>元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37443010/

相关文章:

javascript - x 轴和绘图不同步

javascript - webpack 不允许 d3.csv() 加载数据?

javascript - D3 堆积条形图 : issue calculating and displaying sum/total of each bar

python - 如何从 svgpathtools 贝塞尔曲线获取坐标列表?

javascript - 安卓平板电脑 : Very poor Browser performance for HTML5 canvas

javascript - 重定义构造函数原型(prototype)后,对象构造函数指向原始构造函数而不是prototype.constructor

javascript - 如何在VS Code中实现自定义HTML模式的点击?

javascript - 如何创建在 y 轴上具有唯一计数、在 x 轴上具有类别的基本条形图?

javascript - 等效于 SVG 中的 Canvas quadraticCurveTo

javascript - 添加禁用属性,永久删除 jquery 中的点击事件?