D3.js D3js强制有向图动画和重新加载问题

下面的代码生成了一个力定向图，但有几个问题

比如如何控制打开动画的速度

如何更改拖动速度

主要问题是每次我尝试拖动某个元素时，它都会自动重新加载

我不知道我做错了什么

var width = $(window).width(),
        height = 700;

var force = d3.layout.force()
        .size([width, height])
        .on("tick", tick2);




var svg = d3.select("body .banner").append("svg")
        .attr("width", width)
        .attr("height", height);
//.on("click", explicitlyPosition);

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

function tick2() {
    link
            .attr("x1", function (d) {
                return width * 0.5;
            })
            .attr("y1", function (d) {
                return height * 0.5;
            })
            .attr("x2", function (d) {
                return width * 0.5;
            })
            .attr("y2", function (d) {
                return height * 0.5;
            });

    d3.selectAll("circle")
            .attr("cx", function (d) {
                return width * 0.5;
            })
            .attr("cy", function (d) {
                return height * 0.5;
            });

    d3.selectAll("text")
            .attr("x", function (d) {
                return width * 0.5;
            })
            .attr("y", function (d) {
                return height * 0.5;
            });
    tick();
}
function tick() {
    link.transition()
            .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;
            });

    d3.selectAll("circle").transition()
            .attr("cx", function (d) {
                return d.x;
            })
            .attr("cy", function (d) {
                return d.y;
            });

    d3.selectAll("text").transition()
            .attr("x", function (d) {
                return d.x;
            })
            .attr("y", function (d) {
                return d.y;
            });
}

var graph = {
    "nodes": [
        {"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": false},
        {"name": "SaaS", "val": 768, "x": width * 0.40, "y": height * 0.14, "fixed": true},
        {"name": "Education", "val": 1021, "x": width * 0.65, "y": height * 0.10, "fixed": true},
        {"name": "E-Commerce", "val": 1345, "x": width * 0.75, "y": height * 0.35, "fixed": true},
        {"name": "Food Tech", "val": 512, "x": width * 0.70, "y": height * 0.72, "fixed": true},
        {"name": "Healthcare", "val": 246, "x": width * 0.57, "y": height * 0.70, "fixed": true},
        {"name": "Fashion Industry", "val": 657, "x": width * 0.30, "y": height * 0.80, "fixed": true},
        {"name": "Hardware", "val": 145, "x": width * 0.30, "y": height * 0.65, "fixed": true},
        {"name": "Fintech", "val": 1160, "x": width * 0.25, "y": height * 0.18, "fixed": true},
        {"name": "Series A", "val": 392, "x": width * 0.85, "y": height * 0.13, "fixed": true},
        {"name": "Series B", "val": 873, "x": width * 0.80, "y": height * 0.60, "fixed": true},
        {"name": "2014", "val": 592, "x": width * 0.125, "y": height * 0.25, "fixed": true},
        {"name": "2015", "val": 630, "x": width * 0.19, "y": height * 0.45, "fixed": true}
    ],
    "links": [
        {"source": 0, "target": 1},
        {"source": 0, "target": 2},
        {"source": 0, "target": 3},
        {"source": 3, "target": 9},
        {"source": 3, "target": 10},
        {"source": 0, "target": 4},
        {"source": 0, "target": 5},
        {"source": 0, "target": 6},
        {"source": 0, "target": 7},
        {"source": 0, "target": 8},
        {"source": 8, "target": 11},
        {"source": 8, "target": 12}
    ]
};




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

node = node.data(graph.nodes)
        .enter().append("g")
        .call(force.drag);

node.append("circle")
        .attr("class", "node")
        .attr("r", function (d) {
            you_val = (d.val === "You") ? 1500 : d.val;
            return ((you_val) / 30) < 15 ? 15 : ((you_val) / 30);
        });

node.append("text")
        .attr("x", 0)
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .attr("fill", "#9a9a9a")
        .attr("font-size", "12px")
        .attr("font-weight", "600")
        .text(function (d) {
            return d.val;
        });

node.append("text")
        .attr("x", 0)
        .attr("dy", function (d) {
            you_val = (d.val === "You") ? 1500 : d.val;
            var rad = ((you_val) / 30) < 15 ? 15 : ((you_val) / 30);
            return (rad + 15) + "px";
        })
        .attr("text-anchor", "middle")
        .attr("fill", "#9a9a9a")
        .attr("font-size", "12px")
        .text(function (d) {
            return d.name;
        });

force
        .nodes(graph.nodes)
        .links(graph.links)
        .start();

var width=$（窗口）.width（），
高度=700；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.on（“勾选”，勾选2）；
var svg=d3.select（“body.banner”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//。打开（“单击”，明确位置）；
var link=svg.selectAll（“.link”），
node=svg.selectAll（“.node”）；
函数2（）{
链接
.attr（“x1”，函数（d）{
返回宽度*0.5；
})
.attr（“y1”，函数（d）{
返回高度*0.5；
})
.attr（“x2”，函数（d）{
返回宽度*0.5；
})
.attr（“y2”，功能（d）{
返回高度*0.5；
});
d3.选择全部（“圆圈”）
.attr（“cx”，功能（d）{
返回宽度*0.5；
})
.attr（“cy”，函数（d）{
返回高度*0.5；
});
d3.选择全部（“文本”）
.attr（“x”，函数（d）{
返回宽度*0.5；
})
.attr（“y”，函数（d）{
返回高度*0.5；
});
勾选（）；
}
函数tick（）{
link.transition（）
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
d3.选择全部（“圆”）.transition（）
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
});
d3.选择全部（“文本”）.transition（）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y；
});
}
变量图={
“节点”：[
{“name”：“You”，“val”：“You”，“x”：宽度*0.50，“y”：高度*0.5，“fixed”：false}，
{“name”：“SaaS”，“val”：768，“x”：宽度*0.40，“y”：高度*0.14，“fixed”：true}，
{“name”：“Education”，“val”：1021，“x”：width*0.65，“y”：height*0.10，“fixed”：true}，
{“name”：“E-Commerce”，“val”：1345，“x”：宽度*0.75，“y”：高度*0.35，“fixed”：true}，
{“name”：“Food Tech”，“val”：512，“x”：宽度*0.70，“y”：高度*0.72，“fixed”：true}，
{“name”：“Healthcare”，“val”：246，“x”：宽度*0.57，“y”：高度*0.70，“fixed”：true}，
{“name”：“Fashion Industry”，“val”：657，“x”：width*0.30，“y”：height*0.80，“fixed”：true}，
{“name”：“Hardware”，“val”：145，“x”：width*0.30，“y”：height*0.65，“fixed”：true}，
{“name”：“Fintech”，“val”：1160，“x”：宽度*0.25，“y”：高度*0.18，“fixed”：true}，
{“名称”：“系列A”，“val”：392，“x”：宽度*0.85，“y”：高度*0.13，“固定”：真}，
{“name”：“Series B”，“val”：873，“x”：width*0.80，“y”：height*0.60，“fixed”：true}，
{“name”：“2014”，“val”：592，“x”：宽度*0.125，“y”：高度*0.25，“fixed”：true}，
{“name”：“2015”，“val”：630，“x”：宽度*0.19，“y”：高度*0.45，“fixed”：true}
],
“链接”：[
{“源”：0，“目标”：1}，
{“源”：0，“目标”：2}，
{“源”：0，“目标”：3}，
{“源”：3，“目标”：9}，
{“源”：3，“目标”：10}，
{“源”：0，“目标”：4}，
{“源”：0，“目标”：5}，
{“源”：0，“目标”：6}，
{“源”：0，“目标”：7}，
{“源”：0，“目标”：8}，
{“源”：8，“目标”：11}，
{“源”：8，“目标”：12}
]
};
link=link.data（graph.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
node=node.data（graph.nodes）
.enter（）.append（“g”）
.呼叫（强制拖动）；
node.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，函数（d）{
you_val=（d.val=“you”）？1500:d.val；
返回（（你方）/30）<15？15:（（你方）/30）；
});
node.append（“文本”）
.attr（“x”，0）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.attr（“填充”，“#9a”）
.attr（“字体大小”，“12px”）
.attr（“字体大小”，“600”）
.文本（功能（d）{
返回d.val；
});
node.append（“文本”）
.attr（“x”，0）
.attr（“dy”，函数（d）{
you_val=（d.val=“you”）？1500:d.val；
var rad=（（you_val）/30）<15-15:（（you_val）/30）；
返回（rad+15）+“px”；
})
.attr（“文本锚定”、“中间”）
.attr（“填充”，“#9a”）
.attr（“字体大小”，“12px”）
.文本（功能（d）{
返回d.name；
});
力
.nodes（图.nodes）
.links（graph.links）
.start（）；

我不明白为什么您有两个勾号函数

如何更改拖动速度

主要问题是每次我尝试拖动某个元素时，它都会自动重新加载

只需使用如下单勾选函数：

function tick2() {
    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;
            });

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

    d3.selectAll("text")
            .attr("x", function (d) {
                return d.x;
            })
            .attr("y", function (d) {
                return d.y;
            });
}

在您的例子中，有两个勾号函数，它们的逻辑都非常不同

3） 比如如何控制打开动画的速度

您已将节点指定为使用x和y固定

比如：

{“name”：“You”，“val”：“You”，“x”：宽度*0.50，“y”：高度*0.5，“fixed”：true}

在这种情况下，“强制布局”不会计算x和y，因为您已经说过它是一个固定节点，这意味着它不能通过“强制布局”移动