0

私はゼロからやり、次のコードを書きました。常に左上に 1 つの静的ノードを作成します。私はそれをテンプレートと呼んでいます。テンプレート上でマウス ダウンが行われるたびに、新しいノードが作成されるようにします。新しいノードを好きな場所にドラッグできるはずです。ノードは、私が置いた場所にとどまる必要があります。また、あるノードから別のノードに線を引くことができるはずです。新しいノードの作成が機能しています。新しいノードをマウスでクリックすると、そのノードが var に保存されました。そして、マウスの移動で、移動する変換関数を書きましたが、機能しませんでした。クリックの中に変換も書きました。しかし、それも機能していません。だから私はそれを削除しました。また、リンクが表示されません。申し訳ありませんが、d3 と svg は初めてです。例を見ましたが、まだ解決策が得られませんでした。

注: ノードの位置が同じになるのを避けるために、ノードの x 座標を id*100 にしました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      line.link {
  stroke-width: 2px;
      stroke: #999;
  stroke-opacity: 0.6;
}

marker#arrow {
  stroke: #999;
  fill: #999;
}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
    <svg id="svgContainer">
      <defs>
            <marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"
                    markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,-5L10,0L0,5Z">
            </marker>
       </defs>
    </svg>

    <script>
      var svgContainer = d3.select("#svgContainer");
      var nodeArray = new Array();
  var linkArray = new Array();
      var lastNodeId = -1;

      var element0a = svgContainer.append("g").attr("class","node").attr("x",0).attr("y",0)
    .on("mousedown", mouseDownOnTemplate);

      var element0b = element0a.append("rect").attr("x",0).attr("y",0).attr("width",50).attr("height",50).attr("fill","#8080B2");

  lastNodeId++;
      nodeArray[lastNodeId] = { id : lastNodeId, ui : element0a };

      var mousedown_node;
      var mouseup_node;

      var force = d3.layout.force().nodes(nodeArray).links(linkArray).start();
  var nodes = svgContainer.selectAll("g.node").data(nodeArray).call(force.drag);
      var links = svgContainer.append("g").selectAll("line.link").data(force.links())
                  .enter().append("line").attr("class", "link")
                  .attr("marker-end", "url(#arrow)");

      function mouseDownOnTemplate() {
    var element1a = svgContainer.append("g").attr("class","node").attr("x",0).attr("y",0)
        .on("mousedown", function(d) {
            mousedown_node = d.target;
        })
        .on("mouseup", function(d){
            mouseup_node = d.target;
            linkArray.push({source:mousedown_node, target:mouseup_node});
        });
    lastNodeId++;
    var element1b = element1a.append("rect").attr("x",100*lastNodeId).attr("y",0).attr("width",50).attr("height",50).attr("fill","purple");
    nodeArray[lastNodeId] = { id : lastNodeId, ui : element1a };
            force = d3.layout.force().nodes(nodeArray).links(linkArray).start();
    nodes = svgContainer.selectAll("g.node").data(nodeArray).call(force.drag);
            links = svgContainer.append("g").selectAll("line.link").data(force.links())
                    .enter().append("line").attr("class", "link")
                    .attr("marker-end", "url(#arrow)");
  }

      force.on("tick", function() {
        links.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

        nodes.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });
     });

</script>
  </body>

以前のテキストは次のとおりです。次のコードを html ファイルに記述してブラウザで実行すると、左側にツールボックス、右側にキャンバスが表示されます。ツールボックスに赤い四角形のノードがあります。ノードをキャンバスにドラッグできます。これにより、キャンバス上にノードのクローンが作成されます。キャンバス上に任意の数のノードを作成し、それらを移動できます。コードは d3graph を使用しません。

<!DOCTYPE HTML>
<html>
<head>
<title> JQuery-Test 1 </title>
<link rel="stylesheet" href="css/style1.css" type="text/css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
//  declaring the variables
//  var newNum = 0; 
//  var x = null;

$(document).ready(function(){
$(".node1").draggable({
helper: 'clone',    // cloning the node/icon.
cursor: 'move'      // move with cursor.
// tolerance: 'fit' //??
})

$(".main").droppable({
drop: function(event, node) 
{
var x = node.helper.clone();
x.draggable({
    containment: '.main'
});
node.helper.remove();           
x.appendTo('.main');    
}
});

});
</script>

</head>
<body>

 <div>
 <h1 id="head1_fixed">Input</h1>
 </div>
 <hr>
<p></p>

<div id="toolbox"> <div class="node1"> </div> <p class="box_title"> -- ToolBox -- </p>         
</div>
<div class="main"> </div> 
</body>
</html>

キャンバス内のあるノードから別のノードへのリンクを描画できるようにしたいと考えています。リンクに矢印が付いているのがベストですが、単純な直線でも構いません。また、ノードを移動すると、それに応じて線が拡大、縮小、または回転する必要があります。d3を使用することを考えましたが、ノードがすでに存在し、d3を使用して作成されていない場合の方法がわかりません。

4

0 に答える 0