d3.js: как подсчитать разные категории одного столбца по нескольким строкам, сгруппированным по годам для создания потокового графа - PullRequest
Новая
       15

d3.js: как подсчитать разные категории одного столбца по нескольким строкам, сгруппированным по годам для создания потокового графа

0 голосов
/ 21 апреля 2019

Мы пытаемся создать потоковую диаграмму с помощью d3.js. Поэтому мы должны организовать наш набор данных. В качестве базовой структуры мы используем следующий пример: (https://www.d3 -graph-gallery.com / graph / streamgraph_basic.html ).

Чтобы сложить данные, автор использует столбцы в качестве ключей: var keys = data.columns.slice (1)

В нашем случае все намного сложнее. Нам нужно посчитать разные категории одного столбца, нескольких строк, сгруппированных по годам. В качестве ключей мы хотим использовать 12 различных категорий для хранения наших данных.

Вот так выглядит наш набор данных: 

decade: "1840 - 1849", category: 10
decade: "1840 - 1849", category: 3
decade: "1850 - 1859", category: 12
decade: "1850 - 1859", category: 12
decade: "1850 - 1859", category: 1
decade: "1850 - 1859", category: 2

...

Для 1850 - 1859 гг. Результат должен быть следующим: 

- category: 12 -> 2x
- category: 1 -> 1x
- category: 2 -> 1x

Теперь мы полностью застряли в организации наших данных.

Это наш код: 

...

// Convert CSV into an array of objects
d3.csv("./data/Swissvote.csv").then(function(data) {
    const keys = [1,2,3,4,5,6,7,8,9,10,11,12]
    const yearDomain = d3.extent(data, d => String(d.decade).substr(0, d.decade.length - 7));
    const countDomain = [0, 100];

    // Add X axis
    var xAxis = d3.scaleLinear()
        .domain(yearDomain)
        .range([ 0, width ])
        .nice()
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xAxis).tickPadding(5).tickFormat(d3.format("d")));

    // Add Y axis
    var yAxis = d3.scaleLinear()
        .domain(countDomain)
        .range([ height, 0 ]);
    svg.append("g")
        .call(d3.axisLeft(yAxis).tickPadding(2));

    //stack -> To build a streamgraph, data must be stacked
    var stackedData = d3.stack()
        .offset(d3.stackOffsetNone)
        .keys(keys)
        (data)

    var area = d3.area()
        .x(function(d) {
            return xAxis(d.data.decade);
        })

        .y0(function(d) {
            return yAxis(d.????);
        }) //baseline

        .y1(function(d) {
            return yAxis(d.?????);
        }) //top line


    // Show the areas
    svg
        .selectAll("layers")
        .data(stackedData)
        .enter()
        .append("path")
        .attr("d", area)
})
...