Question

我正在绘制一个节点（圆圈）并尝试使用D3 Javascript将其放大和缩小。这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample2</title>
<style>

.node {
stroke: #fff;
stroke-width: 1.5px;
}

.link {
stroke: #999;
stroke-opacity: .6;
}

</style>
</head>
<body>

<script type="text/javascript" src="d3.v3.js"></script>
<script>
var width = 1000;//960,
height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

//Draw the Circle
var circle = svg.append("circle");

force 
.nodes(d3.values(circle))
.start();

var resourceNode = svg.selectAll(".node")
.data(circle)
    .enter().append("g")
    .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .style("fill", function(d) { return color(2); })
    .attr("r", 10)
    .call(force.drag);

resourceNode.append("circle");

function mouseover() {
     d3.select(this).select("circle").transition()
    .duration(750)
    .attr("r", 20);
     }

    function mouseout() {
     d3.select(this).select("circle").transition()
    .duration(750)
    .attr("r", 10);
     }

    force.on("tick", function() {
     resourceNode.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

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

   </script>
   </body>
   </html>

在上面的代码中，您可能会注意到我添加了两个功能：mouseover和mouseout。这两个函数用于放大和缩小节点。一旦我将鼠标移到节点上，我就可以设法将节点放大和缩小。我的问题是：节点在画布左上角的一个位置冻结，不再移动。如果我删除与缩放功能相关的代码，我将能够将节点移动到我想要的任何地方。有谁能帮我解决这个问题？缩放功能正常，但节点不再移动。当我删除缩放功能时它会移动。我不知道问题是什么。非常感谢您的协助。

Answer 1

在您的代码中，您只能通过力布局控制g元素的位置，而不是圆圈。您不应该将SVG元素作为数据强制布局或通常传递给D3 - 它在技术上会起作用，但几乎肯定不能达到您想要的效果。

我已修改您的示例以执行您想要的操作here。请注意，我添加了实际数据以传递给强制布局和.data()并根据它绘制元素。 circle元素现在也附加到g元素。

使用D3 Javascript缩放节点

1 个答案: