Formato corretto per il disegno di dati poligono in D3

Question

Ho provato questo modo diverso, ma non sembra funzionare nulla. Ecco quello che ho attualmente:

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); 

Suppongo che il problema qui è sia con il modo in cui mi sto definendo i dati di punti come un array di oggetti punto singoli, o qualcosa a che fare con il modo in cui sto scrivendo la funzione per il .attr("points",...

Ho cercato su tutto il web un tutorial o un esempio di come disegnare un poligono semplice, ma proprio non riesco a trovarlo.

Answer 1

Un poligono sembra qualcosa di simile: <polygon points="200,10 250,190 160,210" />

Così, il vostro allineamento completo poli dovrebbe produrre una stringa lunga che creerà un poligono. Poiché stiamo parlando di un poligono, il join dei dati dovrebbe essere anche un array con un solo elemento. Questo è il motivo per cui il codice seguente mostra: data([poly]) se si desideravano due poligoni identici, lo si cambierebbe in data([poly, poly]).

L'obiettivo è creare una stringa dall'array con 4 oggetti. Ho usato un map e un altro join per questo:

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); 

Vedi violino di lavoro: http://jsfiddle.net/4xXQT/

Answer 2

stai provando a disegnare forme poligonali? - come questo. http://bl.ocks.org/2271944 L'inizio del tuo codice appare come un grafico tipico, che di solito concluderebbe qualcosa del genere.

chart.selectAll("line") 
    .data(x.ticks(10)) 
    .enter().append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2", 120) 
.style("stroke", "#ccc"); 

Answer 3

Le risposte di cui sopra sono inutilmente complicate.

Tutto ciò che dovete fare è specificare i punti come una stringa e tutto funziona correttamente. Funzionerà qualcosa di simile qui sotto.

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");