создать форму в d3.js путем перетаскивания элемента DOM

Я пытаюсь создать простую форму, скажем, круг, в d3.js, используя перетаскивание элемента DOM, скажем, div. Так вот что я сделал:создать форму в d3.js путем перетаскивания элемента DOM

<!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); 
    } 
}); 

    });

Проблема заключается в том, что круг не отображается. Не могли бы вы посмотреть, что случилось?

Благодаря Mohamed Ali

источник

2013-08-01 MedAli

Я решил эту проблему с помощью

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

вместо

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

однако я не знаю, почему я должен делать это, например the following example работает с первым типом селекторов в jsFiddle, но он не работал, когда я пытался локально в своем браузере!

источник

2013-08-01 18:33:11 MedAli

Я только проверил свой собственный код и он работает хорошо. Круг отображается, когда я бросаю панель в контейнер. Пожалуйста, смотрите демо: http://jsfiddle.net/af7zk/

var treeCreator = function(){}; 
...

источник

2013-08-01 15:11:13 amakhrov

привет спасибо за ответ, я знаю, что он отлично работает в jsFiddle, см. Пример, который я дал, однако при использовании в локальном браузере, например, chrome он не работает, если я не делаю .append (svg: svg) и .append (SVG: круг) – MedAli

создать форму в d3.js путем перетаскивания элемента DOM

ответ

Смежные вопросы