I trying to add a label to each circle of a scatter plot using D3.js but can't figure it out.

Here is the code: /; I want to add the attribute "name" to each circle (inside or outside).

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

Any thoughts ?

I trying to add a label to each circle of a scatter plot using D3.js but can't figure it out.

Here is the code: https://jsfiddle/8e7qmzw8/; I want to add the attribute "name" to each circle (inside or outside).

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

Any thoughts ?

• javascript
• d3.js
• label
• data-visualization
• scatter-plot

Share Improve this question Follow asked Apr 30, 2016 at 11:39 mounibecmounibec 7511 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here's the result: https://jsfiddle/8e7qmzw8/1/

I wrapped your circles and texts inside a <g> with:

var gdots =  svg.selectAll("g.dot")
            .data(data)
            .enter().append('g');

And then put your texts along with circles inside that <g>.

circles:

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

and texts:

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

You can of course play with the x and y's or you can even add dx and dy attrs to make the texts more centered or wherever you want them to be.