Я импортирую модули, а не всю библиотеку и выдаю ошибку с scaleLinear(). Если я импортирую всю библиотеку D3 (<script src="https://d3js.org/d3.v5.min.js"></script>), ошибка исчезнет. Что еще более запутанно, так это то, что я не получаю ошибок с другими модулями, на которые я ссылаюсь, просто scaleLinear(). Что я здесь не так делаю?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Bar Chart</title>
<script src="../node_modules/d3-array/dist/d3-array.min.js"></script>
<script src="../node_modules/d3-axis/dist/d3-axis.min.js"></script>
<script src="../node_modules/d3-collection/dist/d3-collection.min.js"></script>
<script src="../node_modules/d3-dsv/dist/d3-dsv.min.js"></script>
<script src="../node_modules/d3-fetch/dist/d3-fetch.min.js"></script>
<script src="../node_modules/d3-scale/dist/d3-scale.min.js"></script>
<script src="../node_modules/d3-selection/dist/d3-selection.min.js"></script>
<script src="../node_modules/d3-time-format/dist/d3-time-format.min.js"></script>
<!--<script src="https://d3js.org/d3.v5.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="bar-chart-container"></div>
<script src="app.js"></script>
</body>
</html>
package.json
{
"name": "d3-dev",
"version": "1.0.0",
"description": "Building Data Documents with D3",
"license": "ISC",
"dependencies": {
"d3-array": "^2.3.3",
"d3-axis": "^1.0.12",
"d3-collection": "^1.0.7",
"d3-fetch": "^1.1.2",
"d3-scale": "^3.2.0",
"d3-selection": "^1.4.0",
"d3-time-format": "^2.2.1"
}
}
базовый код для проверки:
const x = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);
x(5)
Возвращает ошибку при использованиимодульные ссылки: TypeError: r is not a function, но отлично работает, когда я использую <script src="https://d3js.org/d3.v5.min.js"></script> в качестве основной ссылки.