Question

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

链接到jsFiddle：

代码（HTML）：

<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>

码（JS）：

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; });     
});

d3强制图放大并缩小问题

0 个答案: