Настройка d3 сложенная диаграмма области

Question

Я пробовал пример сложенных диаграмм http://bl.ocks.org/mbostock/3885211, и мне это нравится. Я просто не знаю, как его настроить. Например, если мне нужно изменить порядок их стека. Иногда данные поступают в порядок, который не имеет смысла в укладке. Также, как изменить цвет?

спасибо!

Answer 1

Поскольку вы используете D3, вам может быть проще использовать библиотеку более высокого уровня для управления диаграммами, называемыми c3js. Вот пример: http://c3js.org/samples/chart_area_stacked.html

Порядок укладки будет зависеть от того, как вы заказываете массив столбцов:

var chart = c3.generate({ 
    data: { 
    columns: [ 
     ['data1', 300, 350, 300, 0, 0, 120], 
     ['data2', 130, 100, 140, 200, 150, 50] 
     ], 
    types: { 
     data1: 'area-spline', 
     data2: 'area-spline' 
     // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack 
      }, 
    groups: [['data1', 'data2']] 
     } 
    }); 

здесь больший набор данных:

[ 
    { 
    "projectDate": "2015-10-29", 
    "status": { 
     "Backlog": 23 
    } 
    }, 
    { 
    "projectDate": "2015-10-29", 
    "status": { 
     "Backlog": 23 
    } 
    }, 
    { 
    "projectDate": "2015-10-30", 
    "status": { 
     "Backlog": 49, 
     "In Progress": 9 
    } 
    }, 
    { 
    "projectDate": "2015-10-30", 
    "status": { 
     "Backlog": 49, 
     "In Progress": 9 
    } 
    }, 
    { 
    "projectDate": "2015-10-31", 
    "status": { 
     "Backlog": 49, 
     "In Progress": 9 
    } 
    }, 
    { 
    "projectDate": "2015-10-31", 
    "status": { 
     "Backlog": 49, 
     "In Progress": 9 
    } 
    }, 
    { 
    "projectDate": "2015-11-01", 
    "status": { 
     "Backlog": 44, 
     "In Progress": 11 
    } 
    }, 
    { 
    "projectDate": "2015-11-01", 
    "status": { 
     "Backlog": 44, 
     "In Progress": 11 
    } 
    }, 
    { 
    "projectDate": "2015-11-02", 
    "status": { 
     "Backlog": 39, 
     "In Progress": 19 
    } 
    }, 
    { 
    "projectDate": "2015-11-02", 
    "status": { 
     "Backlog": 39, 
     "In Progress": 19 
    } 
    }, 
    { 
    "projectDate": "2015-11-03", 
    "status": { 
     "In Progress": 20, 
     "Backlog": 40, 
     "Selected for Development": 1 
    } 
    }, 
    { 
    "projectDate": "2015-11-03", 
    "status": { 
     "In Progress": 20, 
     "Backlog": 40, 
     "Selected for Development": 1 
    } 
    }, 
    { 
    "projectDate": "2015-11-04", 
    "status": { 
     "In Progress": 21, 
     "Backlog": 49 
    } 
    }, 
    { 
    "projectDate": "2015-11-04", 
    "status": { 
     "In Progress": 21, 
     "Backlog": 49 
    } 
    }, 
    { 
    "projectDate": "2015-11-05", 
    "status": { 
     "Backlog": 38, 
     "In Progress": 31, 
     "Merge Candidate": 5 
    } 
    }, 
    { 
    "projectDate": "2015-11-05", 
    "status": { 
     "Backlog": 38, 
     "In Progress": 31, 
     "Merge Candidate": 5 
    } 
    }, 
    { 
    "projectDate": "2015-11-06", 
    "status": { 
     "UX Review": 6, 
     "In Progress": 27, 
     "Selected for Development": 2, 
     "Backlog": 35, 
     "Merge Candidate": 2 
    } 
    }, 

Answer 2

Вы можете попробовать c3js с такие как:

data: { 
    columns: [ 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 333, 100, 140, 200, 150, 50], 
     ['data3', 130, 150, 200, 300, 200, 100] 
    ], 
    type: 'bar', 
    // Change to 'line', 'spline', 'step', 'area', 'area-step' for getting likely type 
    groups: [ 
     ['data1', 'data2', 'data3'] 
    ] 
}, 
bar: { 
    width: { 
     ratio: 1 
    } 
} 

Например, Ваши данные от json - https://jsfiddle.net/ea54hxgy/

Но вам нужно сделать обработку данных JSON в формат c3js (написать одну функцию)