очень простой линейный график d3.js не отображается в браузере - PullRequest
Новая
       18

очень простой линейный график d3.js не отображается в браузере

2 голосов
/ 01 апреля 2019

По какой-то причине я не могу отобразить очень простой линейный график, хотя я использую фрагмент кода из этого источника: https://www.dashingd3js.com/svg-paths-and-d3js

Я довольно новичок в d3.

Я понял, что в исходном фрагменте не было переменной xScale или yScale (которую рекомендовали некоторые решения в StackOverflow), поэтому я попытался включить их в фрагмент, но безрезультатно ... Я не уверен, что даже используюмасштабная функция правильно.Я получил эту версию svg path для отображения, но по соображениям интерактивности мне нужно преобразовать ее в сценарий d3. 

<script src="d3.min.js"></script>

<script>

  var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
    { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
    { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

  var xScale = d3.scale.linear()
    .domain([0, 300])
    .range([0, 300]);

  var yScale = d3.scale.linear()
    .domain([0, 300])
    .range([0, 300]);

  var lineFunction = d3.svg.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); })
    .interpolate("linear");

  var svgContainer = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300);

  var lineGraph = svgContainer.append("path")
    .attr("d", lineFunction(lineData))
    .attr("stroke", "blue")
    .attr("stroke-width", 3)
    .attr("fill", "none");

</script>

1 Ответ

1 голос
/ 01 апреля 2019

Вы используете устаревший код D3 версии 3.Вы можете проверить эту ссылку , чтобы увидеть, какие части d3 изменились в V4 и v5.

в вашем примере кода:

d3.scale.linear() должно быть d3.scaleLinear()

d3.svg.line() должно быть d3.line()

.interpolate("linear") должно быть .curve(d3.curveBasis)

Кроме того, убедитесь, что ваш скрипт находится внутри элемента <body>, а не в<head>

Вот исправленная и протестированная версия: 

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
{ "x": 40,  "y": 10}, { "x": 60,  "y": 40},
{ "x": 80,  "y": 5},  { "x": 100, "y": 60}];

var xScale = d3.scaleLinear()
.domain([0, 300])
.range([0, 300]);

var yScale = d3.scaleLinear()
.domain([0, 300])
.range([0, 300]);

var lineFunction = d3.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveBasis);

var svgContainer = d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300);

var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 3)
.attr("fill", "none");
...