Định dạng thích hợp để vẽ dữ liệu đa giác trong D3

Question

Tôi đã thử các cách khác nhau này, nhưng không có gì có vẻ hoạt động. Dưới đây là những gì tôi hiện có:

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

Tôi giả sử các vấn đề ở đây là một trong hai với cách tôi đang xác định các điểm dữ liệu như là một mảng của các đối tượng điểm cá nhân, hoặc một cái gì đó để làm với làm thế nào tôi đang viết hiện chức năng cho .attr("points",...

Tôi đã tìm kiếm trên web để xem hướng dẫn hoặc ví dụ về cách vẽ một đa giác đơn giản, nhưng tôi dường như không thể tìm thấy nó.

Answer 1

Một đa giác trông giống như sau: <polygon points="200,10 250,190 160,210" />

Vì vậy, poly mảng đầy đủ của bạn nên tạo ra một chuỗi dài mà sẽ tạo ra một đa giác. Vì chúng ta đang nói về một đa giác nên việc nối dữ liệu cũng phải là một mảng chỉ có một phần tử. Đó là lý do tại sao mã bên dưới hiển thị: data([poly]) nếu bạn muốn có hai đa giác giống hệt nhau, bạn sẽ thay đổi điều này thành data([poly, poly]).

Mục đích là tạo một chuỗi từ mảng của bạn với 4 đối tượng. Tôi sử dụng một map và join khác cho việc này:

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

Xem fiddle làm việc: http://jsfiddle.net/4xXQT/

Answer 2

bạn đang cố vẽ các hình đa giác? - như thế này. http://bl.ocks.org/2271944 Bắt đầu mã của bạn trông giống như một biểu đồ điển hình - thường sẽ kết thúc một cái gì đó như thế này.

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

Những câu trả lời trên đều không cần thiết phức tạp.

Tất cả những gì bạn phải làm là chỉ định các điểm dưới dạng chuỗi và mọi thứ hoạt động tốt. Một cái gì đó như thế này dưới đây sẽ làm việc.

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