Почему я не могу отобразить график d3?
Я не могу отобразить график D3 на веб-странице.
Я могу отобразить сюжет, когда выбираю <body>. Однако я не могу отобразить график, когда выбираю, скажем, <div>.
Ниже приведены мои настройки:
plot.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Protein Structure Analyzer</title>
<script type = "text/javascript" src = "../static/jquery/jquery-3.6.3.js"></script>
<script type = "text/javascript" src = "../static/d3/d3.js"></script>
<script type = "text/javascript" src = "../static/d3/d3.min.js"></script>
</head>
<body>
<script type = "text/javascript">
// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svG = d3.select("#plot-div")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]
// X scale and Axis
var x = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([0, width]); // This is the corresponding value I want in Pixel
svG
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// X scale and Axis
var y = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([height, 0]); // This is the corresponding value I want in Pixel
svG
.append('g')
.call(d3.axisLeft(y));
// Add 3 dots for 0, 50 and 100%
svG
.selectAll("whatever")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.y) })
.attr("r", 7)
</script>
<div id = "plot-div"></div>
</body>
</html>
Что я делаю неправильно?
@MarkMcClure, не работает.
—
19.02.2023 12:15
@user366312 user366312 Конечно, у меня работает. Единственные различия между вашим кодом и кодом, который я получил в своем ответе, - это используемая версия D3, тот факт, что я загружаю D3 только один раз, и тот факт, что скрипт загружается первым, как я уже упоминал.
—
19.02.2023 12:28
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
65
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
DIV должен быть в документе до запуска скрипта, поэтому просто переместите DIV в начало документа:
// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svG = d3.select("#plot-div")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]
// X scale and Axis
var x = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([0, width]); // This is the corresponding value I want in Pixel
svG
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// X scale and Axis
var y = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([height, 0]); // This is the corresponding value I want in Pixel
svG
.append('g')
.call(d3.axisLeft(y));
// Add 3 dots for 0, 50 and 100%
svG
.selectAll("whatever")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.y) })
.attr("r", 7)<script src = "https://code.jquery.com/jquery-3.6.3.min.js" integrity = "sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU = " crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "https://d3js.org/d3.v7.min.js"></script>
<div id = "plot-div"></div>Другие вопросы по теме
D3.js Project_Проблема с рендерингом
Как агрегировать данные с помощью d3.js для гистограммы
Извлеките все остальные столбцы и линейные графики в Javascript + d3
Порядок вывода данных в d3.sort() - по возрастанию или по убыванию
Вызов функции для подачи .attr() в d3
Дублированные/вложенные узлы на d3 для любого нового графа принудительной директивы обновления данных
Есть ли способ выделить порядок ребер в соответствии с идентификатором в D3?
Dc.js конфликтует со стилями Bootstrap на диаграмме строк
Раскраска картограммы
Создание визуализаций звездной карты на основе местоположения и даты
Похожие вопросы
Добавьте наложенный текст на видео html5 с помощью Javascript
Попытка проверить пустое значение во входных данных
Почему для работы этого стиля списка выбора требуется селектор CSS :invalid?
Как предотвратить автоматическую прокрутку скрытого div
Результатом выражения xpath "html/body/div/text()[1]" является: [текст объекта]. Это должна быть ошибка элемента при печати текста элемента с использованием Selenium
Как перебрать внутренние элементы в «document.querySelector»
Может ли индикатор прогресса идти в соответствии с реальным временем в течение дня?
Пробел между body и div
Удаление класса css тега <img> после его загрузки
Как использовать несколько таблиц с несколькими тегами выбора
DIV должен быть в документе до запуска сценария, поэтому просто переместите DIV в верхнюю часть документа.