动态创建SVG元素

Question

我试图动态地在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');
                        })

     ;

Answer 1

你想要this之类的东西吗？

如果你有d3选择，

[0] [0]会给你底层的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');
                    })

 ;

Answer 2

罗伯特的答案工作得很好。但我找到了另一种解决方案。我认为这比这更优雅。

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

 ;