Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
3 / 3 / 0
Регистрация: 04.10.2019
Сообщений: 54
1

d3js не рисует path

04.01.2021, 16:33. Просмотров 847. Ответов 6
Метки нет (Все метки)

Сообщений о исключениях нет. Данные в массиве есть. Не могу понять что этой скотине не хватает. Может кто то сможет подсказать ?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function Chart(id, data) {
            var chartData = JSON.parse(data);
            /*console.log(chartData[0].timeData);
            console.log(chartData[chartData.length - 1].timeData);*/
 
            const height = 800;
            const width = 900;
            var svg = d3.select(id)
                .append("svg")
                .attr("width", width)
                .attr("height", height);
            var parseDate = d3.timeParse("%d.%m.%Y %H:%M:%S");
            var lineLvl = d3.line()
                .x(function (d) {
                    //console.log(parseDate(d.timeData));
                    return parseDate(d.timeData);
                })
                .y(function (d)
                {
                    console.log(d.lvlData);
                    return d.lvlData;
                });
 
            var xscale =
                d3.scaleTime()
                    .domain([new Date(parseDate(chartData[0].timeData)), new Date(parseDate(chartData[chartData.length - 1].timeData))])
                    .range([0, width*0.95])
                    ;
            var yscale = d3.scaleLinear()
                .domain([0, d3.max(chartData, function (d) { return d.lvlData*1.1; } )] )
                .range([height / 2, 0]);
 
            var x_axis = d3.axisBottom().scale(xscale)
                .tickFormat(d3.timeFormat("%H:%M"))
                ;
 
            svg.append("path")
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("d", lineLvl(chartData));
 
            var y_axis = d3.axisLeft().scale(yscale);
            svg.append("g")
                .attr("transform", "translate(50, 10)")
                .call(y_axis);
 
            var xAxisTranslate = height / 2 + 10;
            svg.append("g")
                .attr("transform", "translate(50, " + xAxisTranslate + ")")
                .call(x_axis);
        }
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.01.2021, 16:33
Ответы с готовыми решениями:

Сокращение пути к файлу, x:\path\path\...\path
Помогите с решением такой задачи, желательно до четверга)): Строка длиной не более 1000 символов...

Работа с http://d3js.org/
здравствуйте, подскажите по след. вопросу плз: имеем библиотеку для генерации всяких диаграмм....

D3JS. Динамическое добавление узлов в дереве
Это мое первое знакомство с js и с библиотекой d3js, так что не кидайте помидоры =) Мне нужно,...

The path you have specified (D:\Program Files) is invalid. The Oracle Home path may not contain spaces.
Возникла проблема с установкой Oracle9i Database 9.0.1.1.1 ОС: Windows XP Professional SP3 ...

6
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
04.01.2021, 19:35 2
А покажите сам массив данных. Я попробовал убрать часть кода, предназначенную для обработки дат, и передать функции массив объектов с произвольными числовыми значениями ключей — график строится.
1
3 / 3 / 0
Регистрация: 04.10.2019
Сообщений: 54
05.01.2021, 09:34  [ТС] 3
Цитата Сообщение от DrType Посмотреть сообщение
А покажите сам массив данных.
просто массив из сериализованной структуры вида
Код
{"timeData":"17.07.2020 14:36:10","lvlData":"147282","temperatureData":"24","volumeData":"6191"}
0
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
05.01.2021, 10:14 4
В любом случае, проблема в представлении дат. Необходимо создать дату и преобразовать в число; можно попробовать в 16 строчке что-то вроде
Javascript
16
return Date.parse(Date(d.timeData))
0
3 / 3 / 0
Регистрация: 04.10.2019
Сообщений: 54
05.01.2021, 10:22  [ТС] 5
А что не так с d3.timeParse , и почему для оси оно работает ?
1
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
05.01.2021, 10:33 6
Точно. Вот так надо:
Javascript
16
return Date.parse(parseDate(d.timeData))
Добавлено через 2 минуты
Только время представлено в миллисекундах, поэтому цифры получаются слишком большие...
0
3 / 3 / 0
Регистрация: 04.10.2019
Сообщений: 54
05.01.2021, 11:59  [ТС] 7
Цитата Сообщение от DrType Посмотреть сообщение
Точно. Вот так надо:
Javascript
1
return Date.parse(parseDate(d.timeData))
как время не кручу, не отрисовывает кривую
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.01.2021, 11:59

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

Raphael.js карта - добавить polygon или path по клику на path рисунка карты
С наступившим, Форумчане Есть интерактивная карта, подгружаемая через библиотеку Raphael.js, по...

Открыть файл при нажать на область <path></path>
Доброго времени суток) Подскажите пожалуйста, не могу найти ответ в интернете. У меня есть...

[WPF] "Path" является неоднозначной ссылкой между "System.Windows.Shapes.Path" и "System.IO.Path"
Здравствуйте! Делаю экспорт из программы в Excel. Код брался от WinForm, немного переписал....

В графическом режиме начиная с центра рисует две спирали (по часовой и против), в точках пересечения которых рисует окружность заданного радиуса
Написать программу, которая в графическом режиме начиная с центра рисует две спирали (по часовой и...

Найти директории path/dir, рядом с которыми есть файлы path/dir.png
Добрый день. Появилась задача следующего вида. На диске есть директории (назовём полные пути к...

Составить программу,которая при нажатии,клавиши "д" рисует солнце,при нажатии клавиши "н" рисует луну
Помогите пожалуйста сделать


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.