This is a variation of Mike Bostock's Polar Plot using D3 v4. In this example, the radial line generator is used to draw the red line and to plot the function 1 + cos(t) over the domain [0,2π].
forked from cforney's block: Polar Plot (v4)
license: gpl-3.0 |
This is a variation of Mike Bostock's Polar Plot using D3 v4. In this example, the radial line generator is used to draw the red line and to plot the function 1 + cos(t) over the domain [0,2π].
forked from cforney's block: Polar Plot (v4)
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<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: red; | |
stroke-width: 1.5px; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var data = d3.range(0, 2 * Math.PI, .01).map(function(t) { | |
return [t, 1 + Math.cos(t)]; | |
}); | |
console.log(data) | |
var width = 960, | |
height = 500, | |
radius = Math.min(width, height) / 2 - 30; | |
var r = d3.scaleLinear() | |
.domain([0, 2]) | |
.range([0, radius]); | |
var line = d3.radialLine() | |
.radius(function(d) { return r(d[1]); }) | |
.angle(function(d) { return -d[0] + Math.PI / 2; }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 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; }) | |
.attr('fill', 'red'); | |
var ga = svg.append("g") | |
.attr("class", "a axis") | |
.selectAll("g") | |
.data(d3.range(0, 360, 30)) | |
.enter().append("g") | |
.attr("transform", function(d) { return "rotate(" + -d + ")"; }); | |
ga.append("line") | |
.attr("x1", 55) | |
.attr("x2", radius); | |
ga.append("text") | |
.attr("x", radius + 6) | |
.attr("dy", ".35em") | |
.style("text-anchor", function(d) { return d < 270 && d > 90 ? "end" : null; }) | |
.attr("transform", function(d) { return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null; }) | |
.text(function(d) { return d + "°"; }); | |
// svg.append("path") | |
// .datum(data) | |
// .attr("class", "line") | |
// .attr("d", line); | |
</script> |