I've tried this different ways, but nothing seems to be working. Here is what I currently have:
var vis = d3.select("#chart").append("svg")
.attr("width", 1000)
.attr("height", 667),
scaleX = d3.scale.linear()
.domain([-30,30])
.range([0,600]),
scaleY = d3.scale.linear()
.domain([0,50])
.range([500,0]),
poly = [{"x":0, "y":25},
{"x":8.5,"y":23.4},
{"x":13.0,"y":21.0},
{"x":19.0,"y":15.5}];
vis.selectAll("polygon")
.data(poly)
.enter()
.append("polygon")
.attr("points",function(d) {
return [scaleX(d.x),scaleY(d.y)].join(",")})
.attr("stroke","black")
.attr("stroke-width",2);
I assume the problem here is either with the way I am defining the points data as an array of individual point objects, or something to do with how I'm writing the function for the .attr("points",...
I've been looking all over the web for a tutorial or example of how to draw a simple polygon, but I just can't seem to find it.
A polygon looks something like: <polygon points="200,10 250,190 160,210" />
So, your full poly array should produce one long string that will create one polygon. Because we are talking about one polygon the data join should also be an array with only one element. That is why the code below shows: data([poly])
if you wanted two identical polygons you would change this to data([poly, poly])
.
The goal is to create one string from your array with 4 objects. I used a map
and another join
for this:
poly = [{"x":0.0, "y":25.0},
{"x":8.5,"y":23.4},
{"x":13.0,"y":21.0},
{"x":19.0,"y":15.5}];
vis.selectAll("polygon")
.data([poly])
.enter().append("polygon")
.attr("points",function(d) {
return d.map(function(d) {
return [scaleX(d.x),scaleY(d.y)].join(",");
}).join(" ");
})
.attr("stroke","black")
.attr("stroke-width",2);
See working fiddle: http://jsfiddle.net/4xXQT/
The above answers are needlessly complicated.
All you have to do is specify the points as a string and everything works fine. Something like this below will work.
var canvas = d3.select("body")
.append("svg")
.attr("height", 600)
.attr("width", 600);
canvas.append("polygon")
.attr("points", "200,10 250,190 160,210")
.style("fill", "green")
.style("stroke", "black")
.style("strokeWidth", "10px");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With