score:1

I answered that previous question. In your case, you are missing that the "x" variable you feed to `line` is supposed to be an angle (in radians). You are giving it a "year".

Regardless, in your case I'd code this differently. Here's the proper transform with some basic trigonometry:

``````.attr("transform", function(d){
// get angle and radius
var an = l(d.Birth),
ra = r(d.Point),
// calc x, y position
x = ra * Math.cos(an * Math.PI/180),
y = ra * Math.sin(an * Math.PI/180);
return "translate(" + [x,y] + ")";
})
``````

Also note, that I would just position the `g` and add the circle and text to it. Not, position the two elements separately.

Running code:

``````<!DOCTYPE html>
<html>

<style>
.frame {
fill: none;
stroke: #000;
}

.axis text {
font: 10px sans-serif;
}

.axis line,
.axis circle {
fill: none;
stroke: #777;
stroke-dasharray: 1, 4;
}

.axis:last-of-type circle {
stroke: #333;
stroke-dasharray: none;
}

.line {
fill: none;
stroke: orange;
stroke-width: 1.5px;
}
</style>

<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1200,
height = 700,
radius = Math.min(width, height) / 2 - 30;

var r = d3.scale.linear()

//Line
var l = d3.scale.linear()
.range([0, 360]);

//point
var c = d3.scale.linear()
.range([0, 15]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = [{
'Name': 'A',
'Birth': 1700,
'Point': 20,
'size': 120
}, {
'Name': 'B',
'Birth': 1696,
'Point': 45,
'size': 30
}, {
'Name': 'C',
'Birth': 1660,
'Point': 89,
'size': 50
}, {
'Name': 'D',
'Birth': 1784,
'Point': 12,
'size': 80
}, {
'Name': 'E',
'Birth': 1793,
'Point': 33,
'size': 150
}, {
'Name': 'F',
'Birth': 1750,
'Point': 56,
'size': 67
}, {
'Name': 'G',
'Birth': 1738,
'Point': 62,
'size': 25
}, {
'Name': 'H',
'Birth': 1813,
'Point': 87,
'size': 83
}, {
'Name': 'I',
'Birth': 1723,
'Point': 76,
'size': 100
}, {
'Name': 'J',
'Birth': 1786,
'Point': 53,
'size': 90
}]

var youngest = d3.min(data, function(d) {
return d.Birth;
});
var oldest = d3.max(data, function(d) {
return d.Birth;
});

l.domain([Number(youngest), Number(oldest)]);
r.domain([0, d3.max(data, function(d) {
return d.Point;
})]);
c.domain([0, d3.max(data, function(d) {
return d.size;
})]);

var line = d3.svg.line.radial()
return r(d[1]);
})
.angle(function(d) {
return l(d[0]) + Math.PI / 2;
});

var gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(5).slice(1))
.enter().append("g");

gr.append("circle")
.attr("r", r);

gr.append("text")
.attr("y", function(d) {
return -r(d) - 4;
})
.attr("transform", "rotate(15)")
.style("text-anchor", "middle")
.text(function(d) {
return d + '%';
});

var ga = svg.append("g")
.attr("class", "a axis")
.selectAll("g")
.data(l.ticks(12).slice(0, -1))
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + (l(d)) + ")";
});

ga.append("line")

ga.append("text")
.attr("x", radius + 6)
.attr("dy", ".35em")
.style("text-anchor", function(d) {
return l(d) < 270 && l(d) > 90 ? "end" : null;
})
.attr("transform", function(d) {
return l(d) < 270 && l(d) > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null;
})
.text(function(d) {
return d;
});

var color = d3.scale.category20();

var gc = svg.append("g")
.attr("class", "circles")

gc.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "cpoint")
.attr("transform", function(d) {
// get angle and radius
var an = l(d.Birth),
ra = r(d.Point),
x = ra * Math.cos(an * Math.PI / 180),
y = ra * Math.sin(an * Math.PI / 180);
return "translate(" + [x, y] + ")";
})
.append("circle")
.attr("class", "point")
.attr("r", function(d) {
return c(d.size);
})
.attr("fill", function(d, i) {
return color(i);
});

gc.selectAll(".cpoint")
.append("text")
.attr("text-anchor", "middle")
.text(function(d) {
return d.Name + ' ' + d.Point + '%' + ' ' + d.Birth;
})
.style("font-size", '13px');
</script>
</body>

</html>``````