Потеря бара при изменении направления оси y в d3.js

Question

Я играю с d3.js, и я столкнулся с чем-то странным.

Когда я изменяю

var yScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Distance})]) 
     .range([0, h]) 

в

var yScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Distance})]) 
     .range([h, 0]) # CHANGED LINE 

, чтобы получить ось рассчитывать в правильном направлении, один бар не пропадает, а высота остальных баров больше не соответствует значению на оси.

Смотрите здесь для jsfiddle

Я проверил документацию и я не могу найти то, что я здесь отсутствует. Любая помощь будет принята с благодарностью.

Answer 1

Бар не пропадет. Он просто имеет высоту 0 (т. Е. Вы не можете ее увидеть), потому что вы сопоставляете максимальное значение 118377 с вашим доменом [0, 118377] до 0 от диапазона ([h, 0]).

Вы можете проверить его, щелкнув правой кнопкой мыши по графику и нажав кнопку «Проверить элемент». Вы увидите три элемента: rect, а у последнего из них будет height="0".

Я предполагаю, что вы хотите, чтобы ось y начиналась с 0 при пересечении с осью x. Посмотрите на это fork of your fiddle где я изменил вычисление атрибута в следующем:

... 
.attr("y", function(d) { return yScale(d.Distance); }) 
.attr("height", function(d) { return h - yScale(d.Distance); })