gpt4 book ai didi

javascript - 在 D3 散点图圆圈上添加标签

转载 作者:行者123 更新时间:2023-11-30 11:59:43 27 4
gpt4 key购买 nike

我尝试使用 D3.js 为散点图的每个圆圈添加标签,但无法弄清楚。

这是代码:https://jsfiddle.net/8e7qmzw8/ ;我想将属性“名称”添加到每个圆圈(内部或外部)。

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 属性以使文本更居中或位于您希望的任何位置。

关于javascript - 在 D3 散点图圆圈上添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36954426/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com