2016-04-06 1 views
0

Я довольно новичок в D3, и я пытаюсь создать сложную гистограмму (или столбчатую диаграмму) с уникальными барами для каждой строки (каждая наблюдение) в наборе данных.D3 уложенная гистограмма: уникальная строка для каждой строки (стек только одна строка)

Проблема, с которой я столкнулся, заключается в следующем: если существует более одной строки с тем же значением, что и для осей y (в моем случае, в data.csv, в столбцах «seq», «3» и «4», появляется дважды), то все данные с одинаковым именем (из разных строк) будут сложены вместе, как это:

enter image description here

data.csv

seq,Idle Time,Answer Time 
2,95,4 
1,0,3 
3,22,3 
4,0,4 
6,43,3 
5,0,2 
8,30,1 
7,0,3 
4,20,5 
3,0,8 

Но то, что я пытаюсь сделать состоит в том, чтобы сделать один бар для каждой строки, несмотря на одинаковые значения d.seq (чтобы быть два бара для d.seq = 3 и d.seq = 4)

Полный код я работаю сейчас here

Любые предложения будут оценены, спасибо!

ответ

0

Вы можете построить на основе индекса вашего массива данных, а не по значению «seq». Индекс будет уникальным. http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview

Я только что обновил две строки

линии 86:

y.domain(data.map(function(d, i) { return i; })); 

линия 112:

.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; }); 

Если вы все еще хотите, чтобы метка у-тик, чтобы показать значение «seq», посмотрите здесь, где вы можете узнать больше о топорах и о том, как применять специальные ярлыки: https://github.com/mbostock/d3/wiki/SVG-Axes

EDIT

http://plnkr.co/edit/6sNaLwiSSm7aU66qzIOK?p=preview

Вы должны переместить определение YAxis внутри функции успеха d3.csv, а затем ссылаться на массив данных, как так, чтобы маркировать оси, как вы хотели:

var yAxis = d3.svg.axis() 
    .scale(y) 
    .tickFormat(function(i) {return data[i].seq; }) 
    .orient("left"); 
+0

Большое спасибо за решение. Но да, мне еще нужно показать значения «seq» как ярлык y-tick, но до сих пор не могу понять. Я понимаю, что 'Tickformat' должен использоваться, но он не будет работать, если я делаю' yAxis = d3.svg.axis() .scale (y) .tickFormat (function (d) {return d.seq;}); ' , – tiffkyn

+0

См. Редактирование. «D», который вы передаете своей функции в tickFormat, - это только значение галочки, а не ваш массив данных. Вам нужно переместить определение yAxis внутри вызова d3.csv и явно указать свой массив данных. – James

+0

@ Джеймс благодарит за ваш ответ! это спасло меня! – PrincessBelle