3

DOM要素のドラッグアンドドロップを使用して、d3.jsで単純な形状、たとえば円を作成しようとしています。たとえば、divです。だからここに私がしたことがあります：

<!DOCTYPE html>
<html>
<head>
  <title>d3 tree with drag and drop</title>
  <style type="text/css">
   #dropInSVG {
     width:200px;
     height:200px; 
     margin-left:20px;
     background-color:#F8F8F8 ;
  }

#dropInSVG svg {
    width: 200px;
    height:200px;
    background-color:yellow;
 } 

#tobeDropped{
width:50px; 
height:15px;
background-color:pink;
float:left; 
}

#mainContainer {
width: 250px;
height: 250px;
background-color:orange;
cursor:pointer;
}

</style>
</head>
<body>
<div id="mainContainer">
<div id="dropInSVG"></div>
<div id="tobeDropped"></div>
</div>
</body>
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/jquery-ui.js"></script>
<script type="text/javascript" src="./lib/d3.js"></script>
<script type="text/javascript" src="./lib/d3.layout.js"></script>
<script type="text/javascript" src="d3appDrag.js"></script>
</html>

JavaScript コード:

  var treeCreator = function(){}; 


  treeCreator.prototype.callbacktest = function(svgContainer){
  alert('the element has been dropped');
  }; 

  treeCreator.prototype.createTreeNode = function(theSVG){
  $('#tobeDropped').remove();
  theSVG.append("circle")
    .style("stroke","green")
    .style("fill","white")
    .attr("r",40)
    .attr("cx", 100)
    .attr("cy", 100)
    .on("mouseover", function () {
        d3.select(this).style("fill", "aliceblue");
    })
        .on("mouseout", function () {
        d3.select(this).style("fill", "red");
    }); 
 }; 

 $(document).ready(function(){

    $('#tobeDropped').draggable({containment:'#mainContainer'});

var theSVG = d3.select('#dropInSVG')
.append("svg")
.attr("width",200)
.attr("height",200);

var tc = new treeCreator(); 

$('#dropInSVG').droppable({
    drop: function(){
        tc.createTreeNode(theSVG); 
    }
});

  });

問題は、円が表示されないことです。何が悪いのか見ていただけますか？

ありがとうモハメド・アリ

4

3 に答える 3

2

を使用してこの問題を解決しました

.append("svg:svg") 
 and 
.append("svg:circle")

それ以外の

.append("svg")
 and
.append("circle");

ただし、なぜそれを行う必要があるのか​​ わかりません。たとえば、次の例はjsFiddleの最初のタイプのセレクターで機能しますが、ブラウザーでローカルに試したときには機能しませんでした!

于 2013-08-01T18:33:11.853 に答える
-1

埋め込み SVG に SVG 要素を追加するには、Web ページで定義された SVG 名前空間が必要です。jsFiddle でこれが必要ない理由は、名前空間 (SVG の xmlns="http://www.w3.org/2000/svg" 属性) で定義された少なくとも 1 つのページで使用される独自の SVG 画像があるためです。ルート要素)。

ホストされている独自の Web ページの SVG 要素にその名前空間が定義されていない場合、Web ブラウザーは、要素が XHTML 名前空間にあると想定しているため、要素を追加できません。もちろん、SVG タグと CIRCLE タグが定義されているかどうかはわかりません。

更新: 以下のコードに SVG 名前空間属性を追加しました ( xmlns属性)。しかし、最近の Web ブラウザーはスマートで、既に SVG 名前空間を含めることができるため、この例はローカルで機能する可能性があります。本当の問題は、元の例が jsFiddle の外では機能しないため、CDN のメインの jQuery ライブラリへのリンクを省略していたことです。というわけでリンク追加

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

上記の jQuery リソースに関する他の 2 つの参照。

その他の注意: リンクを SVG で機能させるには、XLink 名前空間も追加する必要があります (マークアップで、または SVG 名前空間と同様に JavaScript を介して動的に)。ただし、SVG 2.0 で xlink:href 属性が href に変更されるため、SVG 仕様に従ってください。これが広く利用可能になり、Web ブラウザーでサポートされるようになります。

http://jsfiddle.net/q1bwzhpc/7

var treeCreator = function(){}; 


  treeCreator.prototype.callbacktest = function(svgContainer){
  alert('the element has been dropped');
  }; 

  treeCreator.prototype.createTreeNode = function(theSVG){
      $('#tobeDropped').remove();
      theSVG.append("circle")
        .style("stroke","green")
        .style("fill","white")
        .attr("r",40)
        .attr("cx", 100)
        .attr("cy", 100)
        .on("mouseover", function () {
            d3.select(this).style("fill", "aliceblue");
        })
            .on("mouseout", function () {
            d3.select(this).style("fill", "red");
        }); 
 }; 

 $(document).ready(function(){

    $('#tobeDropped').draggable({containment:'#mainContainer'});

var theSVG = d3.select('#dropInSVG')
.append("svg")
.attr("xmlns", "https://www.w3.org/2000/svg")
.attr("width",200)
.attr("height",200);

var tc = new treeCreator(); 

$('#dropInSVG').droppable({
    drop: function(){
        tc.createTreeNode(theSVG); 
    }
});

  });
于 2018-08-16T20:59:56.483 に答える