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

d3js как прикрепить данные к path ?

14.01.2021, 12:30. Просмотров 714. Ответов 0
Метки нет (Все метки)

Родная документация у это библиотеки (движка?) невероятно ущербная, непонятно абсолютно как и по каким принципам что должно работать. Тем более у её автора какая то мания все 0 нуля переписывать (кроме документации), потому то и 98% существующих примеров неактуальны.
Может кто подскажет как правильно прикрепить данные ?
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function Chart(id, data) {
            var chartData = JSON.parse(data);
            var width = window.innerWidth * 0.85;
            var height = window.innerHeight * 0.75 *2;
 
            var svg = d3.select(id)
                .append("svg")
                .attr("width", width)
                .attr("height", height);
            var parseDate = d3.timeParse("%d.%m.%Y %H:%M:%S"); 
            var xscale =
                d3.scaleTime()
                    .domain([Date.parse(parseDate(chartData[0].timeData))-60000,
                        Date.parse(parseDate(chartData[chartData.length - 1].timeData)) + 60000])
                    .range([0, width*0.95])
                    ;
            var yscale = d3.scaleLinear()
                .domain([0, d3.max(chartData, function (d) { return (d.lvlData*1.1)/10.0; } )] )
                .range([height / 2, 0]);
 
            var x_axis = d3.axisBottom().scale(xscale)
                .tickFormat(d3.timeFormat("%H:%M"))
                ;
 
            var lineLvl = d3.line()
                .x(function (d) {
                    return xscale(Date.parse(parseDate(d.timeData)));
                })
                .y(function (d) {
                    return yscale(d.lvlData/10.0);
                });
 
            var lineVolume = d3.line()
                .x(function (d) {
                    return xscale(Date.parse(parseDate(d.timeData)));
                })
                .y(function (d) {
                    return yscale(d.volumeData);
                });
            /////////////////////////////////////////////////
            var focus = svg
                .append('g')
                .append('circle')
                .style("fill", "none")
                .attr("stroke", "black")
                .attr('r', 8.5)
                .style("opacity", 0);
            ////////////////////////////////////////////////
            svg.append("path")
                //.data(chartData, function (d) { return d.lvlData / 10.0 ;})
                .attr("stroke", "blue")
                .attr("stroke-width", 2.5)
                .attr("fill", "none")
                .attr("d", lineLvl(chartData))
                .on("mouseover", function (event) {
                    d3.select(this).transition()
                        .attr('opacity', '.55');
                    focus.style("opacity", 1);
                    //console.log(event);
                })
                .on("mousemove", function (event, d) {
                    focus.attr("cx", event.layerX);
                    focus.attr("cy", event.layerY);
 
                    console.log(d.toString() );
                })
                .on("mouseout", function () {
                    d3.select(this).transition()
                        .attr('opacity', '1');
                    focus.style("opacity", 0);
                });
 
            svg.append("path")
                .attr("stroke", "green")
                .attr("stroke-width", 2.5)
                .attr("fill", "none")
                .attr("d", lineVolume(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
14.01.2021, 12:30
Ответы с готовыми решениями:

d3js не рисует path
Сообщений о исключениях нет. Данные в массиве есть. Не могу понять что этой скотине не хватает....

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

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

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

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.01.2021, 12:30

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

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 ...

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
Добрый день. Появилась задача следующего вида. На диске есть директории (назовём полные пути к...

Как восстановить PATH?
Всем првет. Я новичек в Линуксе, вчера пытался поменять переменную окружения PATH, но обнулил...


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

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

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