Proper format for drawing polygon data in D3

Question

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\")
         .at         


        

Answer 1

A polygon looks something like:

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/