ví dụ về khu vực d3 ngắn nhất tuyệt đối là gì?

Question

Tôi thực sự đang cố gắng để hiểu các công cụ bố cục area và stack của d3. Tôi đã thử làm những gì tôi nghĩ là ví dụ nhỏ nhất nhưng không có gì xuất hiện và trên thực tế nó in các lỗi trong bảng điều khiển. Tôi không nhận được gì? Đây là mã.

var svg = d3.select("body").append("svg") 
    .attr("width", 400) 
    .attr("height", 300) 

var testData = [ 
    [ 0, 10], 
    [10, 20], 
    [20, 30], 
    [30, 20], 
]; 

svg.selectAll("path.area") 
    .data(testData) 
    .enter().append("path") 
    .style("fill", "#ff0000") 
    .attr("d", d3.svg.area()); 

Answer 1

Kích thước của dữ liệu không chính xác. Mỗi con đường khu vực cần có một mảng 2D, như thế này:

d3.svg.area()([[ 0, 10], [10, 20], [20, 30], [30, 20]]) 

kết quả trong:

"M0,10L10,20L20,30L30,20L30,0L20,0L10,0L0,0Z" 

Điều đó có nghĩa rằng bạn cần phải ràng buộc một mảng 3D để lựa chọn. Mỗi phần tử (tức là đường dẫn) trong vùng chọn sẽ nhận được một mảng 2D.

var svg = d3.select("body").append("svg") 
    .attr("width", 400) 
    .attr("height", 300) 

var testData = [ 
    [ 0, 10], 
    [10, 20], 
    [20, 30], 
    [30, 20], 
]; 

svg.selectAll("path.area") 
    .data([testData])  // dimension of data should be 3D 
    .enter().append("path") 
    .style("fill", "#ff0000") 
    .attr("class", "area") // not the cause of your problem 
    .attr("d", d3.svg.area()); 

Đôi khi sẽ dễ dàng hơn để hình dung những gì đang diễn ra bằng cách tưởng tượng rằng bạn muốn tạo nhiều khu vực. Sau đó, nó sẽ trông giống như:

var testData1 = [ 
    [ 0, 10], 
    [10, 20], 
    [20, 30], 
    [30, 20], 
]; 

var testData2 = [ 
    [100, 110], 
    [110, 120], 
    [120, 130], 
    [130, 120], 
]; 

svg.selectAll("path.area") 
    .data([testData1, testData2]) 
    .enter().append("path") 
    .style("fill", "#ff0000") 
    .attr("class", "area") 
    .attr("d", d3.svg.area());