Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Другие темы раздела
JavaScript Нарисовать Карту мира https://www.cyberforum.ru/ javascript/ thread2768384.html
Как мне на странице создать Карту мира(или отдельного региона, страны) как на прилогаемой картинке? Не просто наросовать а чтоб можно мыло выбирать фрагменты, менять цвет фрагментов. Какие готовые...
Обработка изображения JavaScript
Доброго времени суток, есть "программа" для обработки изображения, одна из функций которой - наложение шума, но вместе с эти изображение также преобразуется в негатив, в чём может быть проблема? ...
JavaScript Слайдер с круговой диаграммой
Добрый день. Сейчас есть слайдер с круговой диаграммой. Код: <div class="slider-section--slider"> <div class="iphone"> <div...
JavaScript Поиск текста на странице с шрифтом красный и НЕ красный здравствуйте, подскажите как сделать, вверху странички поле ввода и две кнопки Поиск 1-чтобы искало текст на странице шрифт у которого красный 2-чтобы искало текст на странице шрифт у которого НЕ... https://www.cyberforum.ru/ javascript/ thread2767362.html
JavaScript Как узнать статус XMLHttpRequest на сайте? https://www.cyberforum.ru/ javascript/ thread2766104.html
Пишу парсер, контент на сайте постоянно обновляется через XMLHttpRequest, из-за чего периодически возникают трудности с анализом текста когда контент прогружается лишь частично. Возможно ли отследить...
JavaScript Как загрузить видео?
Добрый вечер, подскажите поэалуйста У меня на сайте есть стандартные видео HTML <video></video> можно ли как нибудь к ним применить ленивую загрузку, то есть чтобы они загружались только тогда...
Юнит-тесты для фронтэнда JavaScript
Добрый день, подскажите плииз. Такое вообще существует??? Здача - записать что-то вроде "макросов для мышки и клавиатуры" и проигрывать их в страницах в ожидании проверенного/ожидаемого...
JavaScript Бесконечная лента на сайте Здравствуйте всем! Столкнулся с задачей, как сделать на сайте бесконечную ленту? (аля одноклассники) может есть готовые решения? https://www.cyberforum.ru/ javascript/ thread2765836.html
JavaScript Поменять местами цвета кнопок https://www.cyberforum.ru/ javascript/ thread2765760.html
Возникла проблема в написании функции. Есть поле с кнопками 11x11, каждая из которых имеет свой цвет и мы так видим рисунок 11x11 пикселей. Мне нужно написать функцию поворота этого рисунка на 90...
JavaScript неправильно работает математическое уравнение Я что-то недогоняю, объясните мне пожалуйста. Я вычисляю процент от числа, и прибавляю и вычитаю этот процент к этому числу. Допустим, от числа 100 ищу 1 процент, в одно поле вставляю результат... https://www.cyberforum.ru/ javascript/ thread2765657.html
JavaScript Динамически создать кнопку с картинкой https://www.cyberforum.ru/ javascript/ thread2764796.html
Здраствуйте, етот код создает кнопку с картинкой и текстом, <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <button class="myButton"...
JavaScript Получить клас-родителя, обратное :nth-child(n) Здраствуйте, скажите пожалуйста как можно обратится к класу родителя без id, тоесть зделать обратное :nth-child() К примеру зделать здесь так чтоб красился бек-граунд контейнера а не кнопок ... https://www.cyberforum.ru/ javascript/ thread2764787.html
3 / 3 / 0
Регистрация: 04.10.2019
Сообщений: 54
0

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

14.01.2021, 12:30. Просмотров 757. Ответов 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);
        }


Вернуться к обсуждению:
d3js как прикрепить данные к path ?
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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.