通过拖放DOM元素在d3.js中创建一个形状 [英] create a shape in d3.js by drag and drop of a DOM element
本文介绍了通过拖放DOM元素在d3.js中创建一个形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用拖放一个DOM元素在d3.js中创建一个简单的形状，让我们说一个圆，让我们说一个div。所以这里是我做的：
<！DOCTYPE html>
< html>
< head>
< title> d3树与拖放< / 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 / javascriptsrc =./ lib / jquery.js>< / script>
< script type =text / javascriptsrc =./ lib / jquery-ui.js>< / script>
< script type =text / javascriptsrc =./ lib / d3.js>< / script>
< script type =text / javascriptsrc =./ lib / d3.layout.js>< / script>
< script type =text / javascriptsrc =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 ，200）;
var tc = new treeCreator（）;
$（'＃dropInSVG'）。droppable（{
drop：function
tc.createTreeNode（theSVG）;
}
}）;
}）;
问题是，圈子没有显示。你能看看有什么问题吗？
感谢
Mohamed Ali
解决方案>
我通过使用
.append（svg：svg）
和
.append（svg：circle）
而不是
.append（svg）
and
.append（circle）;
但是我不知道为什么要这样做，例如以下示例适用于jsFiddle中的第一种类型的选择器，但是当我在浏览器中尝试本地时它没有工作！
I am trying to create a simple shape, let's say a circle, in d3.js using drag and drop of a DOM element, let's say a div. So here is what I did:
<!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 code:
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);
}
});
});
The problem is that the circle is not showing up. Could you please see what's wrong?
Thanks Mohamed Ali
解决方案
I resolved this issue by using
.append("svg:svg")
and
.append("svg:circle")
instead of
.append("svg")
and
.append("circle");
however I don't know why I should do that, for instance the following example works with the first type of selectors in jsFiddle however it didn't work when I tried locally in my browser!
这篇关于通过拖放DOM元素在d3.js中创建一个形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
