| 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)
forked from vikkya'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> |