Все элементы круга застряли друг за другом

Question

Я пытаюсь добавить круги с цветным фоном с прикрепленным изображением.

Для этого я использую <defs>, <rect> <clipPath> и <use>.Я считаю, что моя иерархия SVG действительна, однако, хотя все элементы имеют уникальный идентификатор , все круги застряли в одной точке.Все элементы <a>, содержащие в себе def, имеют разные x и y , но в них есть одинаковые x и y .

Как это возможно, что все каналы имеют уникальный идентификатор, имеющий одинаковые x и y.

Codepen

Снимок экрана DOM:

 let personCircles = svg.selectAll("a")
            .data(data)
            .enter()
            .append("a")
            .attr("id", function(d) {
                console.log(d["Person Name"]);
                if (d && d.length !== 0) {
                    return d["Person Name"].replace(/ |,|\./g, '_');
                }
            })
            .attr('x', function(d) {
                    return markerCirclesScale(name)
                })
                .attr('y', function(d) {
                    return fullSVGHeight / 2 + 8;
                })
            .style("opacity", 1)
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));




        //Define defs 
        let defs = personCircles.append("defs");

        defs.append('rect')
            .attr('id', function(d) {
                    return "rect-" + d["Person Name"].replace(/ |,|\./g, '_');
            })
            .attr('x', function(d) {
                return markerCirclesScale(name)
            })
            .attr('y', function(d) {
                return fullSVGHeight / 2;
            })
            .attr('width', 60)
            .attr('height', 60)
            .attr('rx', 40)
            .style('fill', 'red')


        defs.append("clipPath")
           .attr('id', function(d) {
                    return "clip-" + d["Person Name"].replace(/ |,|\./g, '_');
            })
            .append("use")
            .attr('href', function(d) {
                    return "#rect-" + d["Person Name"].replace(/ |,|\./g, '_');
            })

         personCircles
                .append("use")
                .attr('href', function(d) {
                    return "#rect-" + d["Person Name"].replace(/ |,|\./g, '_');
            })
            personCircles.append('image')
                .attr('href', function(d) {
                    return 'http://pngimg.com/uploads/donald_trump/donald_trump_PNG72.png'
                })
                .attr("clip-path", function(d) {
                    return "url(#clip-" + d["Person Name"].replace(/ |,|\./g, '_');+")"
                })
                .attr('x', function(d) {
                    return markerCirclesScale(name)
                })
                .attr('y', function(d) {
                    return fullSVGHeight / 2 + 8;
                })
                .attr("width", 60)
                .attr("height", 60)

Answer 1

personCircles относится к элементам <a> ( привязка ), которые не сдвинулись бы ни на дюйм, если вы установите координаты x и y в SVG.Элементы, которые вы пытаетесь позиционировать, это rect s и соответствующие image s, поэтому функция ticked изменяется на следующее, то есть позиционирование rect s, clipPath rect s и image:

function ticked() {
    personCircles.selectAll('rect, image') 
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
}

результат будет таким, как показано на следующей ветке вашего кодового маркера:

https://codepen.io/anon/pen/aPOdON?editors=1010

Надеюсь, что это прояснится.Кстати, мне нравится пример изображения, которое вы используете при тестировании: P