Question

全部。

我有一个任务：onclick创建矩形，需要拖动它们，将其删除并相互链接；在当前步骤中，我使用onclick事件创建矩形，但卡在拖动矩形上-

var svg = d3.select("svg");

svg.on("click", function () {
    var mouse = d3.mouse(this);

    var pointer = svg
    		.append('rect')

        .attr('x', mouse[0]-50)
        .attr('y', mouse[1]-25)
        .attr("width", 100)
        .attr("height", 50)
//        .append("use")
        .datum({x: mouse[0], y: mouse[1], selected: false})
        .attr("id", "currentPointer")
//        .attr("href", "#pointer")
        .attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ")scale(0)")
        .attr("fill", 'gray')
        .attr("stroke", "#039BE5")
        .attr("stroke-width", "1px");

    pointer
        .transition()
        .duration(500)
        .attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ") scale(1)")
        .attr("x", mouse[0]-50)
        .attr("y", mouse[1]-25)
        .attr("transform", "scale(1)");

    pointer.on("click", function () {
        if (d3.event.ctrlKey) {
            pointer.transition()
                .duration(500)
                .attr("transform", "translate(" + pointer.attr("x") + "," + pointer.attr("y") + ") scale(0)")
                .remove();
        } else {
            var datum = pointer.datum();
            if (pointer.datum().selected) {
                datum.selected = false;
                pointer
                    .datum(datum)
                    .transition()
                    .duration(500)
                    .attr("stroke", "#039BE5")
                    .attr("stroke-width", "1px");
            } else {
                datum.selected = true;
                pointer
                    .datum(datum)
                    .transition()
                    .duration(500)
                    .attr("stroke", "#455A64")
                    .attr("stroke-width", "3px");
            }
        }
        d3.event.stopPropagation();
    });

    var dragHandler = d3.drag()
        .on("drag", function (d) {
            d3.select(this)
                .attr("x", d.x = d3.event.x)
                .attr("y", d.y = d3.event.y);
        });

    dragHandler(pointer);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<div class="svg-container">
<svg id="click" xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <defs>
        <g id="pointer" transform="scale(0.8)">
            <path d="M0-1c-14.5-25.6-14.5-25.7-14.5-33.8c0-8.1,6.5-14.6,14.5-14.6s14.5,6.6,14.5,14.6C14.5-26.7,14.5-26.6,0-1z"></path>
            <path d="M0-49c7.7,0,14,6.3,14,14.1c0,8,0,8.1-14,32.8c-14-24.7-14-24.9-14-32.8C-14-42.7-7.7-49,0-49 M0-50c-8.3,0-15,6.8-15,15.1 S-15-26.5,0,0c15-26.5,15-26.5,15-34.9S8.3-50,0-50L0-50z"></path>
        </g>
    </defs>
</svg>
</div>

如果您可以帮助完成任务以及下一步工作，例如与不同矩形的行链接，我将非常感激谢谢您的帮助！

Answer 1

要创建拖动处理程序，应使用 d3.behavior.drag 而不是 d3.drag ，然后按以下方式应用它：

pointer.call(dragHandler);

完整的示例：

var svg = d3.select("svg");

svg.on("click", function () {
    var mouse = d3.mouse(this);

    var pointer = svg
    		.append('rect')

        .attr('x', mouse[0]-50)
        .attr('y', mouse[1]-25)
        .attr("width", 100)
        .attr("height", 50)
//        .append("use")
        .datum({x: mouse[0], y: mouse[1], selected: false})
        .attr("id", "currentPointer")
//        .attr("href", "#pointer")
        .attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ")scale(0)")
        .attr("fill", 'gray')
        .attr("stroke", "#039BE5")
        .attr("stroke-width", "1px");

    pointer
        .transition()
        .duration(500)
        .attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ") scale(1)")
        .attr("x", mouse[0]-50)
        .attr("y", mouse[1]-25)
        .attr("transform", "scale(1)");

    pointer.on("click", function () {
        if (d3.event.ctrlKey) {
            pointer.transition()
                .duration(500)
                .attr("transform", "translate(" + pointer.attr("x") + "," + pointer.attr("y") + ") scale(0)")
                .remove();
        } else {
            var datum = pointer.datum();
            if (pointer.datum().selected) {
                datum.selected = false;
                pointer
                    .datum(datum)
                    .transition()
                    .duration(500)
                    .attr("stroke", "#039BE5")
                    .attr("stroke-width", "1px");
            } else {
                datum.selected = true;
                pointer
                    .datum(datum)
                    .transition()
                    .duration(500)
                    .attr("stroke", "#455A64")
                    .attr("stroke-width", "3px");
            }
        }
        d3.event.stopPropagation();
    });

    var dragHandler = d3.behavior.drag()
        .on("drag", function (d) {
            d3.select(this)
                .attr("x", d.x = d3.event.x)
                .attr("y", d.y = d3.event.y);
        });

    pointer.call(dragHandler);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<div class="svg-container">
<svg id="click" xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <defs>
        <g id="pointer" transform="scale(0.8)">
            <path d="M0-1c-14.5-25.6-14.5-25.7-14.5-33.8c0-8.1,6.5-14.6,14.5-14.6s14.5,6.6,14.5,14.6C14.5-26.7,14.5-26.6,0-1z"></path>
            <path d="M0-49c7.7,0,14,6.3,14,14.1c0,8,0,8.1-14,32.8c-14-24.7-14-24.9-14-32.8C-14-42.7-7.7-49,0-49 M0-50c-8.3,0-15,6.8-15,15.1 S-15-26.5,0,0c15-26.5,15-26.5,15-34.9S8.3-50,0-50L0-50z"></path>
        </g>
    </defs>
</svg>
</div>

拖动和链接矩形，D3 + JS

1 个答案: