如何将plotly.js应用于现有的svg组< g>作为目标，而不是将其应用于目标< div>元件？ [英] How to apply plotly.js to an existing svg group <g> as target instead of applying it to a target <div> element?

问题描述

如果我的DOM中有目标div ，例如

 < div id = graph>< / div> 
  

我可以使用plotly在div中创建一个图p>

  Plotly.newPlot（'graph'，data，layout）; 
  

这将在div中创建一个包含svg元素的嵌套结构。
tn svg元素有一个等高线图，由一些元素表示（参见下面的DOM结构）。这工作正常。

但是，我有一个已经存在的svg 元素（使用d3.js创建），我想在plotly中包含一个等高线图我的目标svg组：

 < 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元素也是一个选项）。

Countour图示例

使用

解决方案

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

  Plotly.newPlot（'graph'，data，layout）; 
 $（'。contour'）。appendTo（'＃mySvgElement'）; 
 $（'＃graph'）。empty（）; 
  

If there is a target div in my DOM, e.g.

<div id="graph"></div>

I can use plotly to create a plot in that div (a full example is below):

Plotly.newPlot('graph', data, layout);

This will create a nested structure in the div that contains an svg element. Tn that svg element there is a contour plot, represented by some elements (see DOM structure below). That works fine.

However, I have an already existing svg element (created with d3.js) and I would like to include a contour plot from plotly in my target svg group:

<div id="myDiv">
  <svg id = "mySvgElement">
      ...
      <rect id="someExistingContent"></rect>
      ...
      <g id = "targetGroupForPlotly"></g>
  </svg>
</div>

Is it possible to tell plotly.js to use that existing svg group instead of a div element?

Well, as an ugly work around, I could plot to an invisible dummy div and then copy the content from there with jquery, but maybe there is some alternative work flow that plots directly to a given target svg group?

(A nested svg element inside my existing svg element would also be an option).

Countour plot example

using 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 structure:

解决方案

The copy workaround with JQuery seems to be the easiest solution:

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

这篇关于如何将plotly.js应用于现有的svg组< g>作为目标，而不是将其应用于目标< div>元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！