Question

尝试将div从chart_div移到movehere div。

我可以将其复制到当前的svg（注释代码）下方。我也可以克隆它，但是没有简单的方法专门针对标头行。该svg中的'g'元素。

html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><div id="movehere"><div id="chart_div"></div></div>

javascript

function afterDraw() {
    var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
    document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
    document.getElementsByTagName("svg")[0].style.overflow = 'visible';
    var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
    g.setAttribute('transform','translate(0,-'+height+')');
  g.setAttribute('transform','translate(0,-'+height+')');

  //var NewG=g.cloneNode(true)
 // var move="translate("+0+","+50+")"
//  NewG.setAttributeNS(null,"transform",move)
//  g.appendChild(NewG)

   $('#chart_div svg').clone().appendTo($('#movehere'))
    g = null;
  }

这是一个例子： https://codepen.io/anon/pen/jJzxzj

谢谢！

Answer 1

看看这支笔：https://codepen.io/jormaturkenburg-the-typescripter/pen/QoVzBq

我用笔清理了HTML。
暂时评论了CSS。
添加了SVG元素以将g（组）移动到，您不能将SVG放在 DIV您只能将其放入SVG元素中。
为g添加了转换，因为该组中的元素以绝对坐标定位，并且被绘制得很低，因此在较小的SVG元素中不可见。

    // The g you want has no id or class attached so selecting with
    // jQuery's n-th child selector was the easiest way to get it
    let group = $("#chart_div svg g:nth-child(3)");
    // Like I mention in my answer you need to attach the g to an SVG element, which I added to your div
    let targetSVG = $("#movehere svg");
    // To show the text you need to translate the group up by about 400 px
    group.clone().attr('transform', `translate(0 -400)`).appendTo(targetSVG);

从下div移动或克隆svg

1 个答案: