Mutlak en kısa d3 alanı örneği nedir?

Question

Gerçekten d3'ün area ve stack düzen öğelerini anlamaya çalışıyorum. En küçük örnek olduğunu düşündüğüm şeyi yapmaya çalıştım ama hiçbir şey görülemiyor ve aslında konsoldaki hataları yazdırıyor. Neyi anlamıyorum? İşte kod.

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

Verilerin boyutu doğru değil. Her alan yolu böyle bir 2D dizi gerekir: içinde

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

sonuçları:

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

seçime de 3D dizisi bağlamak gerektiği anlamına gelir O. Seçimdeki her eleman (yani yol) bir 2D dizi alır.

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

Bazen, birden çok alan oluşturmak istediğinizi hayal ederek neler olup bittiğini görüntülemeniz daha kolaydır. Sonra şöyle olurdu:

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