D3js Stacked Barchart width is not propper

Question

Я пытаюсь сделать диаграмму D3, здесь бары горизонтальные & его ширина должна быть в процентах. Но у меня все еще есть проблема с ее шириной. Я создал скрипку @link. здесь вы видите, что ширина не является правильной, и в то же время ее не выровнять по оси y.

здесь его сложены с выполненным количеством-количеством. здесь выполнено подмножество размещенных, & размещено подмножество количества.

здесь barData m получение от вызова Ajax. в функции getRanges я готовлю множество баров, его возвращение мне это

[[bar1 start point, bar1Length],[bar2 start point, bar2Length],[bar3 start point, bar3Length]]; 

Эти данные только м перебор внутри Foreach для создания баров.

Некоторые Как это происходит в неправильном направлении. может быть, мой масштаб не является правильным или набором данных. Окончательный вывод i должен прийти как .

Теперь мне нужна помощь по крайней мере на выравнивании бара. Может кто-нибудь мне помочь?

Answer 1

Вы создаете, но не используя ваши d3.scale.linear() весов для размещения данных. Ваши переменные x и y являются функциями, которые отображают ваши данные в позиции пикселей. Например, ваша ширина бар

.attr("width", function (d, i) { 
    return d[1] * 100; // what's the magic 100? 
}) 

Это должно быть:

.attr("width", function(d, i) { 
    return x(d[1]); 
}) 

Для размещения значений на оси у вас есть:

.attr("transform", "translate(" + margin.l + "," + (margin.t + (30 * j)) + ")") 

Использование у шкалы это

.attr("transform", "translate(" + margin.l + "," + (y(j) + margin.t - 25/2) + ")") // this will center the bar on the tick 

Кроме того, для вас ось y вы m вы хотите переключиться на ordinal scales, так как вы, например, похожи на скрытые категории, а не на числовой диапазон.

Here's a few changes, что позволит вам двигаться.

Answer 2

Я думаю, вам нужно нарисовать диаграмму stackedBar в горизонтальной

http://tributary.io/inlet/4966973