D3 показать сегмент данных серии

Question

Я ищу советы о том, как решить следующую диаграмму в D3.js:

У меня есть данные в следующем формате для 7-й серии, показанной

╔══════════════════════╗ 
║ Learning Disability ║ 
╠══════════════════════╣ 
║ AgeBand | Percentage ║ 
║ 0-4  | 0.02  ║ 
║ 5-9  | 0.01  ║ 
║ 10-14 | 0.015  ║ 
║ ...  | ...  ║ 
║ 75+  | 75+  ║ 
╚══════════════════════╝ 

Я хотел бы, чтобы ползунок защелкнул 16-летние полосы, а на слайде-переходе каждый последовательный бар. Таким образом, одновременно показываются только значения семи серий из одной возрастной группы.

Что было бы самым простым способом показать только один сегмент из ряда значений и отделить каждую серию от собственной полосы?

Answer 1

показывая только 1 сегмент из ряда значений

серии являются массивами, так что данные:

var x1 = ['data1', 30, 200, 100, 6, 65] 

использование concat, чтобы получить одно значение плюс этикетку. Например:

var x1_segment = [].concat(x1[0],x1[2]) // [ "data1", 200 ] 

разделяющие каждую серию в собственный бар

svg.selectAll("rect").enter(); 

svg.append("rect").data(x1_segment).attr("x", transformX).attr("y", 0); 

svg.selectAll("rect").attr("width", "20"); 

Ссылки

• Data visualization, Part 2: Use D3 component layouts