Question

我是d3的新手，并且昨晚都在尝试各种各样的例子。

我已设法将此代码放在jsfiddle：

var width = 960,
        height = 500;
d3.select(window)
        .on("keydown", keydown);

var selectedNode = null;

var force = d3.layout.force()
        .size([width, height])
        .charge(-400)
        .linkDistance(40)
        .on("tick", tick);

var drag = force.drag()
        .on("dragstart", dragstart);
var outer = d3.select("body").append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .attr("pointer-events", "all");

var svg = outer.append("svg:g")
        .call(d3.behavior.zoom().on("zoom", rescale))
        .on("dblclick.zoom", null);


var link = svg.selectAll(".link"),
        node = svg.selectAll(".node");

// rescale g
function rescale() {
    var trans=d3.event.translate;
    var scale=d3.event.scale;

    svg.attr("transform",
            "translate(" + trans + ")"
            + " scale(" + scale + ")");
}


d3.json("graph.json", function(error, graph) {
    force
            .nodes(graph.nodes)
            .links(graph.links)
            .start();

    link = link.data(graph.links)
            .enter().append("line")
            .attr("class", "link");

    node = node.data(graph.nodes);

    node.enter().append("circle")
            .attr("class", "node")
            .attr("r", 12)
            .on("dblclick", function(d){
                d3.select(this).classed("fixed", d.fixed = false);
            })
            .on("click", function(d){
                node.classed("selected",false);
                d3.select(this).classed("selected", true);

            })
            .call(drag);
});

function tick() {
    link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
}


function dragstart(d) {
    d3.select(this).classed("fixed", d.fixed = true);
    d3.event.sourceEvent.stopPropagation();
}

function mousemove() {
//        if (!mousedown_node) return;
//
//        // update drag line
//        drag_line
//                .attr("x1", mousedown_node.x)
//                .attr("y1", mousedown_node.y)
//                 .attr("x2", d3.svg.mouse(this)[0])
//                .attr("y2", d3.svg.mouse(this)[1]);

}

function mousedown(){
//        svg.call(d3.behavior.zoom().on("zoom"), rescale());
}

function mouseup() {}


function keydown() {

    if (d3.event.keyCode == 65) {
        if (!selectedNode) {
            alert ("no node selected");
            return;
        } else {

        }



    }


}

我不确定为什么这个jsfiddle不起作用，因为它在我的浏览器中有效。有人可以看看。因此我陷入困境的是尝试向节点添加拖动行为。我想添加拖动节点的选项，而不是简单地依赖于力布局。因此，例如，当选择节点并按下键盘上的某个键时，我想移动节点而不是绘制。有人可以帮帮我吗？

Answer 1

如果我理解正确，由于缺少“ graph.json ”文件，小提琴无效。我刚刚更新了您的fiddle

d3.json("https://dl.dropboxusercontent.com/s/uki0gmdvp7vrtm9/graph.json", function(error, graph) {

d3拖动节点行为不起作用

1 个答案: