Как повернуть SVG в d3, который добавляется командой. html? - PullRequest
Новая
       4

Как повернуть SVG в d3, который добавляется командой. html?

0 голосов
/ 10 января 2020

Я показываю строки SVG с помощью команды. html следующим образом: 

function translateNode(node) {
    // get rotation in degrees from corresponding edge
    var segment = drawing.segments.find(n => n.target == node.id);
    if (segment == undefined) {
        segment = drawing.segments.find(n => n.source == node.id);
    }
    var source = drawing.nodes.find(n => n.id == segment.source);
    var angle = Math.atan2(node.y - source.y, node.x - source.x) * 180 / Math.PI;

    // calculate x and y offset
    var x = offsetX + node.x * scale
    var y = offsetY + node.y * scale
    return"translate(" + [x, y] + ") scale(0.1 0.1) " + "rotate(" + angle + ")";
}
nodes.selectAll("nodeSvg")
    .data(d => [d])
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return translateNode(d); })
    .html((d) => {
        return d.svgString
    });

Поэтому я устанавливаю их положение на основе значений x и y. Это работает отлично, но когда я добавляю вращение, они, кажется, вращаются вокруг краевой точки svg, что делает их совершенно неправильными. Я могу представить два решения этой проблемы. Первым делом можно было бы установить привязку вращения к середине с помощью простой команды, которую я не могу найти (или даже не могу найти), или я мог бы рассчитать положение этой точки, если бы знал размер SVG.

Например, строки выглядят следующим образом: 

<?xml version="1.0" encoding="iso-8859-1"?>

<svg id="GD_N_017_506_5" style="overflow:visible" viewBox="-11 -27 22 38" xmlns:hdl="http://www.harness_draw_lib.de" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <metadata>
      <hdl:description>KABELSCHUH A6-1</hdl:description>
   </metadata>
 <defs>
  <style type="text/css"><![CDATA[
    svg {stroke-width:0.25; stroke:black;}
    line {stroke-linecap:round;}
    circle {fill:none;}
    path {fill:none;}
    use.dotPoint {fill:black;}
  ]]></style>
  <symbol id="dotSym">
     <circle cx="0" cy="0" r="0.1"/>
  </symbol>
 </defs>
  <use class="origin" x="-0.000" y="-0.000"/>
  <use class="bpp" x="0.000" y="-22.000"/>
  <use class="dotPoint" style="stroke:red" x="-0.000" y="6.000" xlink:href="#dotSym"/>
  <use class="dotPoint" style="stroke:red" x="6.000" y="-8.000" xlink:href="#dotSym"/>
  <use class="dotPoint" style="stroke:red" x="-6.000" y="-8.000" xlink:href="#dotSym"/>
  <line x1="1.164" y1="-12.990" x2="1.164" y2="-16.873"/>
  <line x1="-1.164" y1="-12.990" x2="-1.164" y2="-16.873"/>
  <line x1="-5.196" y1="-3.000" x2="-0.587" y2="-12.990"/>
  <line x1="0.587" y1="-12.990" x2="5.196" y2="-3.000"/>
  <line x1="-1.650" y1="-22.000" x2="1.650" y2="-22.000"/>
  <line x1="0.000" y1="-17.154" x2="1.650" y2="-17.154"/>
  <line x1="-1.650" y1="-17.154" x2="0.000" y2="-17.154"/>
  <line x1="0.000" y1="-16.873" x2="1.164" y2="-16.873"/>
  <line x1="-1.164" y1="-16.873" x2="0.000" y2="-16.873"/>
  <line x1="-0.564" y1="-12.990" x2="1.164" y2="-12.990"/>
  <line x1="-1.164" y1="-12.990" x2="-0.564" y2="-12.990"/>
  <line x1="1.650" y1="-17.154" x2="1.650" y2="-22.000"/>
  <line x1="-1.650" y1="-17.154" x2="-1.650" y2="-22.000"/>
  <line x1="1.164" y1="-16.873" x2="1.650" y2="-17.154"/>
  <line x1="-1.650" y1="-17.154" x2="-1.164" y2="-16.873"/>
  <circle cx="0.000" cy="0.000" r="3.000"/>
  <path d="M-5.196,-3.000 A6.000,6.000 0 1 0 5.196,-3.000"/>
</svg>

Вот несколько картинок, показывающих, что делает вращение (слева без вращения, справа с вращением): Ссылка на изображение

У кого-нибудь есть идеи, как решить или подойти к этому?

Заранее спасибо!

...