Базовая d3: Горизонтальная диаграмма диаграммы

Question

У вас возникли проблемы с простой гистограммой здесь, вы не можете найти проблему.

Смотрите эту FIDDLE http://jsfiddle.net/nn3yex69/

Обратите внимание на две основные проблемы:

1) количество баров не соответствие количества элементов в dataset.

2) Ширина крупнейших rect х доходит до полного размера svg, несмотря на xScale желаемого padding.

Было бы очень полезно помочь здесь, я в тупике.

Answer 1

1) Вы выбираете все rect элементов в SVG. У вас уже есть один элемент rect: фон! Попробуйте изменить строку 36 на svg.selectAll("rect.bar").

2) Там обивка на левом и правом, так и на линии 17 использование .range([padding,w - (2*padding)]);

Answer 2

Вы были присоединяя «прямоугольник» и так далее SelectAll («Rect»), то первый элемент из набора данных был переопределяя атрибуты первого добавленного «rect».

Удаление следующее будет делать трюк:

svg.append("rect") 
    .attr("height", h) 
    .attr("width", w) 
    .attr("stroke", "black") 
    .attr("fill", "#ccc") 
    .attr("stroke-width", 2) 

Изменено скрипку: http://jsfiddle.net/nn3yex69/1/

Я бы создать DIV и стиль с помощью CSS, чтобы быть содержащий DIV, чтобы держать свои бары.