Question

我想要一个可缩放的圆圈，里面有文字。文本应具有自适应的字体大小，以使其适合圆圈。下面是我的无文字圆圈示例。我发现向圈子添加工具提示也很容易。现在，我想用“ g”替换圆并在其中放一个圆和文本。（参考是注释的代码）问题是我不知道如何在父选择中放置“ g”形状。圆按值缩放并自动定位。现在，当我尝试用“ g”替换它们时，转换“ g”的代码行没有定义“ x”和“ y”。

var zoomable_layer = svg.append( "g" );

svg.call(zoom);
svg.call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2).scale(0.1));

var link = zoomable_layer
     .attr("class", "links")
     .selectAll("line")
     .data(graph.links)

var node = zoomable_layer
     .attr("class", "nodes")
     .selectAll("circle")
     .data(graph.nodes)
     .enter().append("circle")
     .attr( "r", function ( d ) { return scale( d.value ); } )
     .attr("cx", function (d, i) { return d.x })
     .attr("cy", function (d, i) { return d.y });

/* COMMENTED ***
var node = zoomable_layer
     .attr("class", "nodes")
     .selectAll(".node")
     .data(graph.nodes)
     .enter().append("g")
     .attr("transform", function(d) { console.log(JSON.stringify(d)); return "translate(" + d.x + "," + d.y + ")"; });

node.append("circle")
     .attr( "r", function ( d ) { return scale( d.value ); } )
     .attr("cx", function (d, i) { return d.x })
     .attr("cy", function (d, i) { return d.y });

 node.append("text")
     .text(function(d) { var arr = d.id.split(":"); let t = arr[arr.length-1]; return t; })
     .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })
     .attr("dy", ".35em");
*/

d3缩放可适应的文字和形状

0 个答案: