Javascript d3力图放大和缩小问题

我有一个d3力图，但我真的不知道如何放大和缩小。 当前要缩小，我将圆半径减小5，要放大，我将其增大5。 问题是我不知道如何用圆圈缩小或增加文本大小

链接到JSFIDLE:

代码（HTML）：

---

为什么不使用标准的d3/svg缩放：？圆圈上的物理效果与常规缩放功能不一致。但是如果你能让它正常工作，请给我发送一个JSFIDLE链接。因此，这不是为了解决你的问题。最后，您应该使用前面提到的集成缩放。你能告诉我们你最后想要什么吗？这是我的一个例子：你想让它这样做吗？它有点高级，但应该可以帮助您了解这是否是您想要的。为什么您不使用标准d3/svg缩放：？圆圈上的物理特性与常规缩放功能不一致。但是如果您能够使其正常工作，请向我发送一个JSFIDLE链接。因此，这不是为了解决您的问题。最后，您应该使用前面提到的集成缩放。你能告诉我们你最后想要什么吗？这是我的一个例子：你想让它这样做吗？这是一个有点先进，但应该帮助你看看这是否会是你想要的。

<input type="button" onClick="zoomIn();" value="Zoom In">
<input type="button" onClick="zoomOut();" value="Zoom Out">
<svg width="500" height="500" style="background-color: lightgrey; border: 1px solid black;">
</svg>
<script>
var r = 30;
function zoomIn()
{
    r += 5;
    d3.selectAll("circle").attr("r", r);
}
function zoomOut()
{
    r -= 5;
    d3.selectAll("circle").attr("r", r);
}
</script>

var nodes = [
    {
        "name": "node1",
        "group": "1"
    },
    {
        "name": "subNode1",
        "group": "1"
    }
];
var links = [
    {
        "source": 0,
        "target": 1
    }
];
var width = 500;
var height = 500;
var svg = d3.select("svg");
var color = d3.scale.category20();
var textXPlus = 31;
var textYPlus = 2;
var force = d3.layout.force()
    .charge(-160)
    .size([width, height])
    .linkDistance(150)
    .nodes(nodes)
    .links(links)
    .start();
var texts = svg.selectAll("text")
    .data(nodes)
    .enter()
    .append("text")
    .attr("fill", "red")
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .text(function(d) { return d.name; });
var links = svg.selectAll("line")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });
var nodes = svg.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("r", 30)
    .attr("fill", function(d){ return color(d.group); })
    .call(force.drag);
force.on("tick", function()
{
    links.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; });
    nodes.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    texts.attr("x", function(d){ return d.x + textXPlus; })
    .attr("y", function(d){ return d.y + textYPlus; });     
});