通過拖放DOM元素在d3.js中創建一個形狀

我想要在d3.js中使用拖放一個DOM元素來創建一個簡單的形狀，比如說一個圓，讓我們來說一個div。因此，這裏是我做過什麼：通過拖放DOM元素在d3.js中創建一個形狀

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

    });

的問題是，圈內沒有顯示出來。你能看看有什麼問題嗎？

感謝穆罕默德·阿里·

來源

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

通過拖放DOM元素在d3.js中創建一個形狀

回答

相關問題