mr_sol: Move Elements in SVG D3

SELF-Forum

Move Elements in SVG D3

mr_sol
– Informationen zu den Bewertungsregeln

Hallo!

Ich verwende D3 um use-Elemente im SVG Canvas mit der Maus zu verschieben. Leider klappt es nicht. Hat jemand eine Idee was hier falsch ist? Danke im Voraus

<html>  
<head>  
<meta charset="utf-8">  
<title>Test</title>  
  <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>  
  </head>  
  <body>  
  <style>  
  circle{  
    fill: #FF1100;  
    stroke: #00CCCC;  
 }  
  </style>  
<svg viewBox = "0 0 1000 1000"  
     xmlns="http://www.w3.org/2000/svg"  
     xmlns:xlink="http://www.w3.org/1999/xlink">  
    <defs>  
  
      <symbol id="test1">  
    <circle r="8" cy="8" cx="8">  
      </symbol>  
  
      <symbol id="test2">  
    <circle r="4" cy="8" cx="8">  
      </symbol>  
    </defs>  
  
      <use id="a20" x = "200" y = "150" xlink:href = "#test1"/>  
      <use id="a20" x = "200" y = "250" xlink:href = "#test2"/>  
  
  </svg>  
  
  <script type="text/javascript">  
  
  var element= null;  
  
  //****  
d3.selectAll("use")  
    .on("mousedown", function(){element=this;})  
    .on("mouseup", function(){element = null;});  
  
d3.selectAll("svg")  
     .on("mousemove", function(){ if (element!=null)  
    {  
     var mouse=d3.svg.mouse(this);  
     d3.select(this).attr("x", mouse[1]);  
     d3.select(this).attr("y", mouse[2]);  
     }});  
  
  </script>  
  </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Move Elements in SVG D3

    misterunknown Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin,

    Ich verwende D3 um use-Elemente im SVG Canvas mit der Maus zu verschieben. Leider klappt es nicht. Hat jemand eine Idee was hier falsch ist?

    Falsch ist nichts. Dein Skript tut genau das, was du ihm gesagt hast.

    »» d3.selectAll("svg")  

>      .on("mousemove", function(){ if (element!=null)  
>     {  
>      var mouse=d3.svg.mouse(this);  
>      d3.select(this).attr("x", mouse[1]);  
>      d3.select(this).attr("y", mouse[2]);  
>      }});

    Denk mal drüber nach. d3.select(this) ist aller Wahrscheinlichkeit nach nicht das, wonach du suchst. Ersetze this durch element.

    Und noch ein Hinweis: du brauchst noch einen Handler, der bei mouseup das element auf null setzt.

    Grüße Marco

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Move Elements in SVG D3

      misterunknown Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Moin,

      d3.select(this).attr("x", mouse[1]);  
d3.select(this).attr("y", mouse[2]);

      Außerdem ist das mouse-Array natürlich null-basiert. Die Indizes müssten demzufolge 0 und 1 heißen.

      Und nochwas: Ich habe gerade gesehen, dass du schon versucht hast, einen mouseup-Handler zu definieren. Diesen solltest du allerdings einmalig auf das SVG-Element registrieren, nicht auf die zu verschiebenden Elemente selbst:

      d3.select("svg").on("mouseup", function(){ element = null; });

      Grüße Marco

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln