d3.stack () TypeError: Невозможно прочитать свойство '' из неопределенного - PullRequest
Новая
       32

d3.stack () TypeError: Невозможно прочитать свойство '' из неопределенного

0 голосов
/ 20 декабря 2018

Попытка построить Streamgraph в v5, но это так отличается от v3.

Имеет смысл иметь: 

.x(function(d) { return formatDate.parse(d.Year);})
.y(function(d) { return +d["HIV/AIDS"] });

, но я думаю, что это код d3 v3, который сталустарели.Вместо этого я использую ключи.

console.log ("Новые вложенные данные:", newData);дает слои: undefined

Что я делаю не так?

Codepen

Данные: 

key: "Zambia"
values: Array(14)
0: {Country: "Zambia", Year: "Year 2000",  HIV/AIDS: 3042, …}
1: {Country: "Zambia", Year: "Year 2001",  HIV/AIDS: 3170, …}
2: {Country: "Zambia", Year: "Year 2002",  HIV/AIDS: 3159, …}

Код: 

//Stack generator
var stack = d3.stack()
.keys(function(d){return +d["HIV/AIDS"]})
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone)

//Line generator 
let area= d3.area()
    .x(function(d) {
        return xScale(dateFormat(d.Year));
    })
    .y0(function(d){
        return yScale(d.y0);

    })
    .y1(function(d){
        return yScale(d.y0 + d.y)
    })
//group data by country name
    let newData = d3.nest()
        .key(function(d) {
            return d.Country;
        })
        .sortKeys(d3.descending)
        .sortValues(function(a, b) {
            return dateFormat(a.Year) - dateFormat(b.Year);
        })
        .entries(data);

var layers = stack(newData);
    console.log("layers", layers); 
//Define yScale domain after data loaded
yScale.domain([d3.max(data, function(d) {
    return +d["HIV/AIDS"]
}), 0]);


svg.selectAll("path")
    .data(layers)
    .enter()
    .append("path")
    .classed("line", true)
    .attr("d", function(d){
        return area(+d["HIV/AIDS"])
    })
    .style("fill", "url(#linear-gradient)")
...