Простая гистограмма D3.js: перепутались позиция и размеры группы "g"

Я новичок в D3.js, пытаюсь сделать простую гистограмму. Вот мой ПОК:

<!DOCTYPE html>
<html>

<head></head>

<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.js"></script>

<script type = "text/javascript">
    dataSet = [
        { 'year': 1851, 'data': -5.0 },
        { 'year': 1861, 'data': -4.5 },
        { 'year': 1871, 'data': -3.2 },
        { 'year': 1881, 'data': -2.8 },
        { 'year': 1891, 'data': -1.7 },
        { 'year': 1901, 'data': -1.0 },
        { 'year': 1911, 'data': 1.2 },
        { 'year': 1921, 'data': 2.5 },
        { 'year': 1931, 'data': 3.0 },
        { 'year': 1941, 'data': 3.9 },
        { 'year': 1951, 'data': 4.7 },
    ];
    console.info(dataSet);
    const widthSvg = 1024;
    const heightSvg = 768;

    const svg = d3.select('body')
        .append('svg')
        .attr('width', widthSvg)
        .attr('height', heightSvg);

    const outerAxisPadding = 70;
    const yAxisWidth = 20;
    const xAxisHeight = 20;

    const margins = {
        left: outerAxisPadding + yAxisWidth,
        top: outerAxisPadding,
        bottom: outerAxisPadding + xAxisHeight,
        right: outerAxisPadding
    };

    const graphArea = {
        left: margins.left,
        top: margins.top,
        right: widthSvg - margins.right,
        bottom: heightSvg - margins.bottom,
        width: 0,
        height: 0
    };
    graphArea.width = graphArea.right - graphArea.left;
    graphArea.height = graphArea.bottom - graphArea.top;

    const dataGroup = svg.append('g')
        .attr('transform', 'translate(' + graphArea.left + ',' + graphArea.top + ')')
        .attr('width', graphArea.width - 10)
        .attr('height', graphArea.height - 10);

    const xScale = d3.scaleLinear()
        .domain([
            d3.min(
                dataSet.map(d => d.year)
            ) - 15,
            d3.max(
                dataSet.map(d => d.year)
            ) + 15
        ])
        .range([0, graphArea.width]);

    const yScaleForAxis = d3.scaleLinear()
        .domain([
            d3.min(dataSet.map(d => d.data)),
            d3.max(dataSet.map(d => d.data))
        ])
        .nice()
        .range([graphArea.height, 0]);

    const yScaleForValues = d3.scaleLinear()
        .domain([
            d3.min(dataSet.map(d => Math.abs(d.data))),
            d3.max(dataSet.map(d => Math.abs(d.data)))
        ])
        .nice()
        .range([0, graphArea.height / 2]);

    // for debug:
    dataSet.forEach(d => console.info(d.year + ' ' + d.data + ' ' + yScaleForValues(d.data)));

    const xAxis = d3.axisBottom(xScale);
    const yAxis = d3.axisLeft(yScaleForAxis);

    // add yAxis nodes
    svg.append('g')
        .attr('transform', 'translate(' + outerAxisPadding + ',' + graphArea.top + ')')
        .call(yAxis);

    // add xAxis nodes
    svg.append('g')
        .attr('transform', 'translate(' + graphArea.left + ',' + (heightSvg - outerAxisPadding) + ')')
        .call(xAxis);

    dataGroup.selectAll('rect')
        .data(dataSet)
        .enter()
        .append('rect')
        .text((d, i) => d.year + ' ' + d.data) // just for information / debugging
        .attr('fill', 'blue')
        .attr('x', (d, i) => xScale(d.year))
        .attr('y', (d, i) => {
            if (d.data > 0) {
                return graphArea.height - yScaleForValues(0) - yScaleForValues(d.data);
            } else {
                return graphArea.height - yScaleForValues(0);
            }
        })
        .attr('width', '15')
        .attr('height', (d, i) => yScaleForValues(Math.abs(d.data)));
</script>
</body>
</html>

Я не знаю, хорошо ли это структурировано или это хорошая практика. Цель здесь состоит в том, чтобы внедрить массив набор данных в прямоугольники, при этом поле years является осью x, а поле данных — осью y.

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

Спасибо

javascript d3.js
25.02.2019 12:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец-то заработало, совсем другая версия:

<!DOCTYPE html>
<html>

<head></head>

<body>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.js"></script>

    <script type = "text/javascript">
        dataSet = [
            { 'year': 1831, 'data': -6.9 },
            { 'year': 1841, 'data': -5.7 },
            { 'year': 1851, 'data': -5.0 },
            { 'year': 1861, 'data': -4.5 },
            { 'year': 1871, 'data': -3.2 },
            { 'year': 1881, 'data': -2.8 },
            { 'year': 1891, 'data': -1.7 },
            { 'year': 1901, 'data': -1.0 },
            { 'year': 1911, 'data': 1.2 },
            { 'year': 1921, 'data': 2.5 },
            { 'year': 1931, 'data': 3.0 },
            { 'year': 1941, 'data': 3.9 },
            { 'year': 1951, 'data': 4.7 },
        ];
        console.info(dataSet);
        const widthSvg = 1024;
        const heightSvg = 768;

        const svg = d3.select('body')
            .append('svg')
            .attr('width', widthSvg)
            .attr('height', heightSvg);

        const outerAxisPadding = 70;
        const yAxisWidth = 20;
        const xAxisHeight = 20;

        const margins = {
            left: outerAxisPadding + yAxisWidth,
            top: outerAxisPadding,
            bottom: outerAxisPadding + xAxisHeight,
            right: outerAxisPadding
        };

        const graphArea = {
            left: margins.left,
            top: margins.top,
            right: widthSvg - margins.right,
            bottom: heightSvg - margins.bottom,
            width: 0,
            height: 0
        };
        graphArea.width = graphArea.right - graphArea.left;
        graphArea.height = graphArea.bottom - graphArea.top;

        const dataGroup = svg.append('g')
            .attr('transform', 'translate(' + graphArea.left + ',' + graphArea.top + ')')
            .attr('width', graphArea.width - 10)
            .attr('height', graphArea.height - 10);

        const xScale = d3.scaleLinear()
            .domain([
                d3.min(
                    dataSet.map(d => d.year)
                ) - 15,
                d3.max(
                    dataSet.map(d => d.year)
                ) + 15
            ])
            .range([0, graphArea.width]);

        const yScaleForAxis = d3.scaleLinear()
            .domain([
                d3.min(dataSet.map(d => d.data)),
                d3.max(dataSet.map(d => d.data))
            ])
            .nice()
            .range([graphArea.height, 0]);

        const yScaleForValues = d3.scaleLinear()
            .domain([
                d3.min(dataSet.map(d => d.data)),
                d3.max(dataSet.map(d => d.data))
            ])
            .nice()
            .range([0, graphArea.height]);

        // for debug:
        dataSet.forEach(d => console.info(d.year + ' ' + d.data + ' ' + yScaleForValues(d.data)));

        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScaleForAxis);

        // add yAxis nodes
        svg.append('g')
            .attr('transform', 'translate(' + outerAxisPadding + ',' + graphArea.top + ')')
            .call(yAxis);

        // add gridlines
        svg.append('g')
            .attr('transform', 'translate(' + margins.left + ',' + graphArea.top + ')')
            .call(yAxis.tickFormat(data => '').tickSize(-graphArea.width));

        // add xAxis nodes
        svg.append('g')
            .attr('transform', 'translate(' + graphArea.left + ',' + (heightSvg - outerAxisPadding) + ')')
            .call(xAxis);

        dataGroup.selectAll('rect')
            .data(dataSet)
            .enter()
            .append('rect')
            .text((d, i) => d.year + ' ' + d.data) // just for information / debugging
            .attr('fill', 'blue')
            .attr('x', (d, i) => xScale(d.year))
            .attr('y', (d, i) => {
                if (d.data > 0) {
                    return graphArea.height - yScaleForValues(0) - (yScaleForValues(d.data) - yScaleForValues(0)); // can shorten maths :p
                } else {
                    return graphArea.height - yScaleForValues(0);
                }
            })
            .attr('width', '15')
            .attr('height', (d, i) => {
                if (d.data > 0) {
                    return yScaleForValues(d.data) - yScaleForValues(0);
                } else {
                    return yScaleForValues(0) - yScaleForValues(d.data);
                }
            });
    </script>
</body>

</html><!DOCTYPE html>
<html>

<head></head>

<body>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.js"></script>

    <script type = "text/javascript">
        dataSet = [
            { 'year': 1831, 'data': -6.9 },
            { 'year': 1841, 'data': -5.7 },
            { 'year': 1851, 'data': -5.0 },
            { 'year': 1861, 'data': -4.5 },
            { 'year': 1871, 'data': -3.2 },
            { 'year': 1881, 'data': -2.8 },
            { 'year': 1891, 'data': -1.7 },
            { 'year': 1901, 'data': -1.0 },
            { 'year': 1911, 'data': 1.2 },
            { 'year': 1921, 'data': 2.5 },
            { 'year': 1931, 'data': 3.0 },
            { 'year': 1941, 'data': 3.9 },
            { 'year': 1951, 'data': 4.7 },
        ];
        console.info(dataSet);
        const widthSvg = 1024;
        const heightSvg = 768;

        const svg = d3.select('body')
            .append('svg')
            .attr('width', widthSvg)
            .attr('height', heightSvg);

        const outerAxisPadding = 70;
        const yAxisWidth = 20;
        const xAxisHeight = 20;

        const margins = {
            left: outerAxisPadding + yAxisWidth,
            top: outerAxisPadding,
            bottom: outerAxisPadding + xAxisHeight,
            right: outerAxisPadding
        };

        const graphArea = {
            left: margins.left,
            top: margins.top,
            right: widthSvg - margins.right,
            bottom: heightSvg - margins.bottom,
            width: 0,
            height: 0
        };
        graphArea.width = graphArea.right - graphArea.left;
        graphArea.height = graphArea.bottom - graphArea.top;

        const dataGroup = svg.append('g')
            .attr('transform', 'translate(' + graphArea.left + ',' + graphArea.top + ')')
            .attr('width', graphArea.width - 10)
            .attr('height', graphArea.height - 10);

        const xScale = d3.scaleLinear()
            .domain([
                d3.min(
                    dataSet.map(d => d.year)
                ) - 15,
                d3.max(
                    dataSet.map(d => d.year)
                ) + 15
            ])
            .range([0, graphArea.width]);

        const yScaleForAxis = d3.scaleLinear()
            .domain([
                d3.min(dataSet.map(d => d.data)),
                d3.max(dataSet.map(d => d.data))
            ])
            .nice()
            .range([graphArea.height, 0]);

        const yScaleForValues = d3.scaleLinear()
            .domain([
                d3.min(dataSet.map(d => d.data)),
                d3.max(dataSet.map(d => d.data))
            ])
            .nice()
            .range([0, graphArea.height]);

        // for debug:
        dataSet.forEach(d => console.info(d.year + ' ' + d.data + ' ' + yScaleForValues(d.data)));

        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScaleForAxis);

        // add yAxis nodes
        svg.append('g')
            .attr('transform', 'translate(' + outerAxisPadding + ',' + graphArea.top + ')')
            .call(yAxis);

        // add gridlines
        svg.append('g')
            .attr('transform', 'translate(' + margins.left + ',' + graphArea.top + ')')
            .call(yAxis.tickFormat(data => '').tickSize(-graphArea.width));

        // add xAxis nodes
        svg.append('g')
            .attr('transform', 'translate(' + graphArea.left + ',' + (heightSvg - outerAxisPadding) + ')')
            .call(xAxis);

        dataGroup.selectAll('rect')
            .data(dataSet)
            .enter()
            .append('rect')
            .text((d, i) => d.year + ' ' + d.data) // just for information / debugging
            .attr('fill', 'blue')
            .attr('x', (d, i) => xScale(d.year))
            .attr('y', (d, i) => {
                if (d.data > 0) {
                    return graphArea.height - yScaleForValues(0) - (yScaleForValues(d.data) - yScaleForValues(0)); // can shorten maths :p
                } else {
                    return graphArea.height - yScaleForValues(0);
                }
            })
            .attr('width', '15')
            .attr('height', (d, i) => {
                if (d.data > 0) {
                    return yScaleForValues(d.data) - yScaleForValues(0);
                } else {
                    return yScaleForValues(0) - yScaleForValues(d.data);
                }
            });
    </script>
</body>

</html>

Мне по-прежнему интересны любые комментарии/критика.

26.02.2019 09:47

Другие вопросы по теме

Имитация звуковой волны с помощью d3
C3.js показать изображение при наведении курсора мыши
Изменить цвет стрелки так же, как линия в D3, когда я переключаю строки
Измерение перекрестного фильтра, не отображающее количество
Json объект в файл в D3 V4, V5
Javascript d3 отбирает значения d3 за пределами клипа
Как я могу центрировать текст в узле?
HTML-элементы отображаются в режиме отладки в Firefox, но не отображаются при нормальной загрузке
Создайте изогнутую границу вокруг проекции карты d3
Angular D3 понимает функцию attrTween

Похожие вопросы

Рандомизировать stylesheet.css при каждом посещении страницы
OpenSSL в браузере — нужно получить приватный ключ из .pem, а затем подписать
У нас есть 2 линии. Как мы можем получить точку, где эти две строки пересекаются с JavaScript?
Кнопка входа в Facebook: уже подключена
Amped Studio 2 - Звуковой движок
Как получить значение текстовой области в javascript
Cordova: загрузить изображение и местоположение в базу данных и загрузить ближайшие изображения
Как отправить двоичные данные в чистом JavaScript?
Как редактировать вложенную реактивную форму с проверкой?
Chart.js — стиль легенды: меньшие круги