在D3散点图圆上添加标签
Adding label on a D3 scatter plot circles
我试图使用D3.js为散点图的每个圆添加一个标签,但无法实现。
这是代码:https://jsfiddle.net/8e7qmzw8/;我想将属性"name"添加到每个圆(内部或外部)。
var data = [
{"x": -123, "y": 63, "r": 37, "c": "#50C2E3", "name": "A"},
{"x": 71, "y": 0, "r": 15, "c": "#50C2E3", "name": "B"},
{"x": 3845, "y": 77, "r": 15, "c": "#50C2E3", "name": "C"},
{"x": 3176, "y": 90, "r": 15, "c": "#50C2E3", "name": "D"},
{"x": -17, "y": 56, "r": 15, "c": "#50C2E3", "name": "D"},
{"x": 1357, "y": 58, "r": 15, "c": "#50C2E3", "name": "E"},
{"x": 7684, "y": 75, "r": 15, "c": "#50C2E3", "name": "F"}
];
var width = 500;
var height = 500;
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
};
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var minX = _(data).orderBy('x').first().x;
var maxX = _(data).orderBy('x').last().x;
x.domain([minX - 500, maxX + 500]);
y.domain([0, 100]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3
.select("#d3")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + 0 + "," + height / 2 + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width / 2 + "," + 0 + ")")
.call(yAxis)
.append("text");
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", function (d) {
return d.r;
})
.attr("cx", function (d) {
return x(d.x);
})
.attr("cy", function (d) {
return y(d.y);
})
.style("fill", function (d) {
return d.c;
});
有什么想法吗?
结果如下:https://jsfiddle.net/8e7qmzw8/1/
我用将你的圆圈和文本包裹在<g>
中
var gdots = svg.selectAll("g.dot")
.data(data)
.enter().append('g');
然后把你的文本和圆圈放在<g>
里面。
圆:
gdots.append("circle")
.attr("class", "dot")
.attr("r", function (d) {
return d.r;
})
.attr("cx", function (d) {
return x(d.x);
})
.attr("cy", function (d) {
return y(d.y);
})
.style("fill", function (d) {
return d.c;
});
和文本:
gdots.append("text").text(function(d){
return d.name;
})
.attr("x", function (d) {
return x(d.x);
})
.attr("y", function (d) {
return y(d.y);
});
你当然可以使用x和y,或者你甚至可以添加dx和dy属性,使文本更居中或位于你想要的任何位置。
相关文章:
- 高图表根据负/正值添加 yAxis 标签
- 在d3.js中添加文本标签以强制定向图链接
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- 不能在我们的CMS中使用PHP,但我想添加PHP标签
- 使用 javascript 在运行时将 id 添加到
- 标签
- 如何在加载前添加加载动画
- 如何为这些图像添加标题标签
- Symfony - 嵌入表单中的食谱“添加新标签”不起作用
- 如何在网页加载之前添加加载页面
- 使用 JS 或 Jquery 将复选框和无线电中的值添加到标签中
- 如果元素不包含“*”,则使用 jQuery 将“*”添加到标签中
- 选择2:使用代码动态添加新标签
- 当我使用 ckeditor 工具栏时,它会添加 html 标签,而不是在显示时添加所需的效果
- 将类添加到标签
- 添加 tr 标签会导致函数停止工作
- 仅在移动设备中添加 javascript 标签
- 如何添加<br/>在最后一个单词上加标签
- 动态添加
标点符号前加标签 - 为什么添加<脚本>标签在运行时不加载javascript文件?(react.js)