[英]d3 add text to circle
I am trying to add some text into circle. 我想在圆圈中添加一些文字。 I have been following example from a mbostock tutorial , but wasn't able to get the right output.
我一直在关注mbostock教程中的示例 ,但无法获得正确的输出。
The code snippet is: 代码段是:
var data;
var code;
d3.json("/json/trace.json", function(json) {
data = json;
console.log(data);
// get code for visualization
code = data["code"];
alert(code);
var mainSVG = d3
.select("#viz")
.append("svg")
.attr("width", 900)
.attr("height", 900);
mainSVG
.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 100)
.attr("cx", 300)
.attr("cy", 300);
circle = mainSVG.selectAll("circle").data([code]);
});
Any suggestions how to get this work? 有任何建议如何让这项工作?
Here is an example showing some text in circles with data from a json file: http://bl.ocks.org/4474971 . 下面是一个示例,显示了一些带有json文件数据的圆圈文本: http : //bl.ocks.org/4474971 。 Which gives the following:
这给出了以下内容:
The main idea behind this is to encapsulate the text and the circle in the same " div
" as you would do in html to have the logo and the name of the company in the same div
in a page header. 这背后的主要思想是将文本和圆圈封装在与html中相同的“
div
”中,以便在页眉中的同一div
中具有徽标和公司名称。
The main code is: 主要代码是:
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
d3.json("data.json", function(json) {
/* Define the data for the circles */
var elem = svg.selectAll("g")
.data(json.nodes)
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.append("g")
.attr("transform", function(d){return "translate("+d.x+",80)"})
/*Create the circle for each block */
var circle = elemEnter.append("circle")
.attr("r", function(d){return d.r} )
.attr("stroke","black")
.attr("fill", "white")
/* Create the text for each block */
elemEnter.append("text")
.attr("dx", function(d){return -20})
.text(function(d){return d.label})
})
and the json file is: 和json文件是:
{"nodes":[
{"x":80, "r":40, "label":"Node 1"},
{"x":200, "r":60, "label":"Node 2"},
{"x":380, "r":80, "label":"Node 3"}
]}
The resulting html code shows the encapsulation you want: 生成的html代码显示了您想要的封装:
<svg width="960" height="500">
<g transform="translate(80,80)">
<circle r="40" stroke="black" fill="white"></circle>
<text dx="-20">Node 1</text>
</g>
<g transform="translate(200,80)">
<circle r="60" stroke="black" fill="white"></circle>
<text dx="-20">Node 2</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Node 3</text>
</g>
</svg>
Extended the example above to fit the actual requirements, where circled is filled with solid background color, then with striped pattern & after that text node is placed on the center of the circle. 扩展上面的示例以符合实际要求,其中带圆圈的实心背景颜色填充,然后使用条纹图案,然后将文本节点放置在圆的中心。
var width = 960, height = 500, json = { "nodes": [{ "x": 100, "r": 20, "label": "Node 1", "color": "red" }, { "x": 200, "r": 25, "label": "Node 2", "color": "blue" }, { "x": 300, "r": 30, "label": "Node 3", "color": "green" }] }; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) svg.append("defs") .append("pattern") .attr({ "id": "stripes", "width": "8", "height": "8", "fill": "red", "patternUnits": "userSpaceOnUse", "patternTransform": "rotate(60)" }) .append("rect") .attr({ "width": "4", "height": "8", "transform": "translate(0,0)", "fill": "grey" }); function plotChart(json) { /* Define the data for the circles */ var elem = svg.selectAll("g myCircleText") .data(json.nodes) /*Create and place the "blocks" containing the circle and the text */ var elemEnter = elem.enter() .append("g") .attr("class", "node-group") .attr("transform", function(d) { return "translate(" + dx + ",80)" }) /*Create the circle for each block */ var circleInner = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", function(d) { return d.color; }); var circleOuter = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", "url(#stripes)"); /* Create the text for each block */ elemEnter.append("text") .text(function(d) { return d.label }) .attr({ "text-anchor": "middle", "font-size": function(d) { return dr / ((dr * 10) / 100); }, "dy": function(d) { return dr / ((dr * 25) / 100); } }); }; plotChart(json);
.node-group { fill: #ffffff; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Output: 输出:
Below is the link to codepen
also: 以下是
codepen
的链接:
Thanks, Manish Kumar 谢谢,Manish Kumar
Here's a way that I consider easier: The general idea is that you want to append a text element to a circle element then play around with its "dx" and "dy" attributes until you position the text at the point in the circle that you like. 这是我认为更简单的一种方式:一般的想法是你想要一个文本元素附加到一个圆形元素然后用它的“dx”和“dy”属性来玩,直到你将文本定位在你的圆圈中的点喜欢。 In my example, I used a negative number for the dx since I wanted to have text start towards the left of the centre.
在我的例子中,我使用了dx的负数,因为我想让文本从中心的左边开始。
const nodes = [ {id: ABC, group: 1, level: 1}, {id:XYZ, group: 2, level: 1}, ]
const nodeElems = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r',radius)
.attr('fill', getNodeColor)
const textElems = svg.append('g')
.selectAll('text')
.data(nodes)
.enter().append('text')
.text(node => node.label)
.attr('font-size',8)//font size
.attr('dx', -10)//positions text towards the left of the center of the circle
.attr('dy',4)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.