动态创建SVG元素
动态创建SVG元素
提问于 2015-06-15 05:06:29
我试图动态地在d3js中创建一些圆圈，但由于某种原因，它失败了。当我将矩形悬停时，我的要求是在矩形上显示两个小圆圈。鼠标上的事件圈应该隐藏起来。我尝试通过创建一个rect对象并将其传递给一个函数，然后在函数中获取矩形的组，并尝试将circles附加到其中。
有人能告诉我错误在哪里吗？
function drawCircle(rect, side){
var g = (rect.parentNode);
// var g = d3.select(aaa.parentNode);
// console.log(g.attr('id'));
g.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', 500)
.attr('height', 500)
.style('fill', 'red')
;
var x = 0, y = 0, r =0;
var rectHeight = parseFloat(rect.attr('height'));
var rectWidth = parseFloat(rect.attr('width'));
var rectX = parseFloat(rect.attr('x'));
var rectY = parseFloat(rect.attr('y'));
y = rectY + rectHeight/2;
r = rectHeight/8;
if(side == 'left'){
x = rectX;
}else{
x = rectX + rectWidth;
}
g.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', r)
.style('visibility', 'hidden')
.on('mouseover', function(){
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function () {
g
.selectAll('circle')
.style('visibility', 'hidden')
});
rect
.on('mouseover', function(){
// alert('hover');
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function(){
g
.selectAll('circle')
.style('visibility', 'hidden')
})
}
var rectangle = {
width : 50,
height:50,
x:100,
y:100
};
var svg = d3.select('svg');
var g = svg.append('g').attr('id', 'group');
console.log(g.attr('id'));
var rect = g.append('rect')
.attr('id', 'aaa')
.attr('x', rectangle.x)
.attr('y', rectangle.y)
.attr('width', rectangle.width)
.attr('height', rectangle.height)
.style('fill', 'blue')
.on('mouseover', function(){
drawCircle(this, 'right');
drawCircle(this, 'left');
})
;回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-15 12:22:58
罗伯特的回答很有效。但我找到了另一个解决办法。我觉得这比那更优雅。
function drawCircle(rect, side){
var g = d3.select(rect.node().parentNode);
var x = 0, y = 0, r =0;
var rectHeight = parseFloat(rect.attr('height'));
var rectWidth = parseFloat(rect.attr('width'));
var rectX = parseFloat(rect.attr('x'));
var rectY = parseFloat(rect.attr('y'));
y = rectY + rectHeight/2;
r = rectHeight/8;
if(side == 'left'){
x = rectX;
}else{
x = rectX + rectWidth;
}
g.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', r)
.style('visibility', 'hidden')
.on('mouseover', function(){
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function () {
g
.selectAll('circle')
.style('visibility', 'hidden')
});
rect
.on('mouseover', function(){
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function(){
g
.selectAll('circle')
.style('visibility', 'hidden')
})
}
var rectangle = {
width : 50,
height:50,
x:100,
y:100
};
var svg = d3.select('svg');
var g = svg.append('g').attr('id', 'group');
console.log(g.attr('id'));
var rect = g.append('rect')
.attr('id', 'aaa')
.attr('x', rectangle.x)
.attr('y', rectangle.y)
.attr('width', rectangle.width)
.attr('height', rectangle.height)
.style('fill', 'blue')
.on('mouseover', function(){
drawCircle(rect, 'right');
drawCircle(rect, 'left');
})
;Stack Overflow用户
发布于 2015-06-15 07:15:09
你想要像这这样的东西吗？
如果有d3选择，则提供基础DOM元素。我还删除了大的红色测试，因为它停止了所有的工作。
function drawCircle(rect, side){
var g = d3.select(rect[0][0].parentNode);
var x = 0, y = 0, r =0;
var rectHeight = parseFloat(rect.attr('height'));
var rectWidth = parseFloat(rect.attr('width'));
var rectX = parseFloat(rect.attr('x'));
var rectY = parseFloat(rect.attr('y'));
y = rectY + rectHeight/2;
r = rectHeight/8;
if(side == 'left'){
x = rectX;
}else{
x = rectX + rectWidth;
}
g.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', r)
.style('visibility', 'hidden')
.on('mouseover', function(){
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function () {
g
.selectAll('circle')
.style('visibility', 'hidden')
});
rect
.on('mouseover', function(){
g
.selectAll('circle')
.style('visibility', 'visible')
;
})
.on('mouseout', function(){
g
.selectAll('circle')
.style('visibility', 'hidden')
})
}
var rectangle = {
width : 50,
height:50,
x:100,
y:100
};
var svg = d3.select('svg');
var g = svg.append('g').attr('id', 'group');
console.log(g.attr('id'));
var rect = g.append('rect')
.attr('id', 'aaa')
.attr('x', rectangle.x)
.attr('y', rectangle.y)
.attr('width', rectangle.width)
.attr('height', rectangle.height)
.style('fill', 'blue')
.on('mouseover', function(){
drawCircle(rect, 'right');
drawCircle(rect, 'left');
})
;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30837699
复制相关文章
相似问题
腾讯云开发者
