Столбчатая диаграмма D3.js растет в отрицательном направлении

Question

Столбчатая диаграмма D3.js растет в отрицательном направлении

1

Я новичок в D3 и javascripts. Я пытаюсь создать анимированную вертикальную стеклянную гистограмму. Я нашел здесь пример для горизонтальной гистограммы. После настройки, я получил вертикальную стеклянную гистограмму, однако, растущую вниз. Вот моя отредактированная скрипка.

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

rects = groups.selectAll('.stackedBar')
        .data(function(d,i) {console.log("data", d,i); return d; })
        .enter()
        .append('rect').attr('class','stackedBar')
        .attr('y', function(d) { return yScale(d.y0); })
        .attr('x', function(d, i) {return xScale(d.x); })
        .attr('height',0)
        .attr('width', xScale.rangeBand());

        console.log(document.querySelectorAll(".stacked"));
        var abc=document.querySelectorAll(".stackedBar");

     rects
        .transition()
        .delay(function(d,i,j){console.log("pre",j); return j*500;})
        .attr("y", function(d) { return yScale(d.y0); })
        .attr("height", function(d) { return yScale(d.y); } )
        .duration(1000);

Но я искал вокруг и пытался вернуть диапазон yScale, начальную позицию y, и никто из них не работал. Я также заметил, что несмотря ни на что, мой yAxis всегда находится ниже моей оси X, идущей в doward.

Rui 20 сен. 2017, в 22:57

Источник

0

Ваша полоса растет сверху, а ваши данные начинаются с 0, а ваша ось находится сверху. Вы хотите увеличить планку снизу вверх (начиная с 1200+) или изменить всю ориентацию, и ваша ось X также будет внизу?
3TW3 20 сен. 2017, в 21:06
0

Я хочу, чтобы ось x была внизу, а затем столбцы растут вверх, один за другим, как показано в оригинальном примере, но в вертикальном направлении.
Rui 21 сен. 2017, в 14:11
0

Хорошо, я добавил ответ ниже.
3TW3 21 сен. 2017, в 18:29

Показать ещё 1 комментарий

Теги:

javascript

d3.js

2 ответа

1

SVG начинается с верхнего левого угла, поэтому указанная высота означает высоту страницы, поэтому некоторые вещи работают в обратном порядке от того, что вы ожидаете.

Сначала начните с вашего y-масштаба: диапазон должен отображаться в обратном порядке (высота, 0), а не (0, высота).

yScale = d3.scale.linear().domain([0,yMax]).range([height,0]),1

Аналогично, ось x должна быть преобразована, чтобы начать с высоты.

        svg.append('g')
        .attr('class', 'axis')
        .call(xAxis)
        .attr("transform", "translate(0," + height + ")");'

RebRy 20 сен. 2017, в 23:45

0

Я внес изменения в соответствии с вашим предложением. Ось X теперь находится внизу, а ось Y теперь выше оси X, что является большим прогрессом. Тем не менее, фактические тики все еще в обратном порядке: 1200 внизу и 0 вверху.
Rui 21 сен. 2017, в 16:22
0

Просто сделал еще несколько изменений, включая изменение окончательного значения 'y' и 'height'. Теперь это работает так, как я хочу. рабочая скрипка здесь: jsfiddle.net/maggiehu/e0r2pzc0/5
Rui 21 сен. 2017, в 18:37

Ещё вопросы

Ваша полоса растет сверху, а ваши данные начинаются с 0, а ваша ось находится сверху. Вы хотите увеличить планку снизу вверх (начиная с 1200+) или изменить всю ориентацию, и ваша ось X также будет внизу?
Я хочу, чтобы ось x была внизу, а затем столбцы растут вверх, один за другим, как показано в оригинальном примере, но в вертикальном направлении.
Я внес изменения в соответствии с вашим предложением. Ось X теперь находится внизу, а ось Y теперь выше оси X, что является большим прогрессом. Тем не менее, фактические тики все еще в обратном порядке: 1200 внизу и 0 вверху.
Просто сделал еще несколько изменений, включая изменение окончательного значения 'y' и 'height'. Теперь это работает так, как я хочу. рабочая скрипка здесь: jsfiddle.net/maggiehu/e0r2pzc0/5

3TW3 · Accepted Answer · 2017-09-21T17-16-00.000Z

Сначала вы должны изменить ориентацию y-scale:

yScale = d3.scale.linear().domain([0,yMax]).range([height,0])

И ось x должна быть преобразована так, чтобы она начиналась с "высоты". В svg верх имеет высоту = 0, так что дно вашего svg равно "высоте":

svg.append('g')
   .attr('class', 'axis')
   .call(xAxis)
   .attr("transform", "translate(0," + height + ")");

И последнее, но не менее важное: вы должны изменить ориентацию здания на сводной гистограмме:

rects
   .transition()
   .delay(function(d,i,j){console.log("pre",j); return j*500;})
   .attr("y", function(d) { return yScale(d.y + d.y0); })
   .attr("height", function (d) { return yScale(d.y0) - yScale(d.y + d.y0); } )
   .duration(1000);

Вот обновленная скрипка.

да! Ваш ответ в точности совпадает с изменениями, которые я потратил 4 часа, чтобы разобраться сам ... Я бы хотел увидеть это раньше. Спасибо, и я думаю, что я все еще изучал кучу за четыре часа чтения примеров других людей и пробовал многочисленные подходы.
Отлично сработано! Я думаю, что это хороший способ учиться, когда вы пытаетесь сформулировать хороший вопрос и обсудить его с другими людьми.