D3.svg.line() error: Uncaught TypeError: Не удается прочитать свойство 'line' из undefined

Я использую следующий код, чтобы попытаться нарисовать путь, используя d3.js Я пробовал различные примеры кода в Интернете о том же и везде получал такую же ошибку.

Далее следует JS:

<script type="text/javascript">
    var svg;
    //The data for our line
 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}];

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg:svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");
    </script>

Ошибка: Uncaught TypeError: не удается прочитать свойство 'line' из undefined

Это происходит по следующей строке: var lineFunction = d3.svg.line()

Я не уверен, что означает undefined '. Любые выводы?

Ответ 1

Чтение вашего comment Предположим, вы используете D3 v4. Начиная с версии 4 нет d3.svg, поэтому сообщение об ошибке. Генератор линий, который вы ищете, теперь определяется как d3.line().

Если вы все еще используете версию 3, вместо этого будет d3.svg.line().

Ответ 2

Убедитесь, что ваш код изменился в синтаксисе ниже, поскольку в версии 4 нет d3.svg.

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