Создание линейной диаграммы с ошибкой получения d3

В следующем примере я использую функцию lineFunction для построения координат для пути. Я надеюсь правильно ввести код, все еще столкнувшись с ошибкой. Может кто-нибудь помочь?Создание линейной диаграммы с ошибкой получения d3

SNIPPET:

<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 
<script> 

$(document).ready(function(){ 

    //our basic data 
    var customData = [ 
     {"x": 100, "y": 100}, 
     {"x": 200, "y": 50}, 
     {"x": 300, "y": 150}, 
     {"x": 400, "y": 20} 
    ]; 

    //the line function for path 
    var lineFunction = d3.svg.line() 
     .x(function(d) { return d.x; }) 
     .y(function(d) { return d.y; }) 
     .interpolate("linear"); 

    //Main svg container 
    var mySVG = d3.select("svg"); 

    //defining the lines 
    var path = mySVG.append("path"); 

    //plotting lines 
    path 
     .attr("d", lineFunction(customData)) 
     .attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; }) 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 
}); 
</script> 
</head> 

<body> 
    <svg width="500px" height="500px"></svg> 
</body> 
</html>

ОШИБКА:

var lineFunction = d3.svg.line() //error here ...

источник

2016-11-11 Deadpool

выглядит вопрос о версии для меня – Chetan

ли вы включили ваши библиотеки выше вашего сценария? Вы, наверное, думаете, что я спрошу. –

Похоже версионности вопрос для меня принять смотреть на это -

$(document).ready(function(){ 
 

 
    //our basic data 
 
    var customData = [ 
 
     {"x": 100, "y": 100}, 
 
     {"x": 200, "y": 50}, 
 
     {"x": 300, "y": 150}, 
 
     {"x": 400, "y": 20} 
 
    ]; 
 

 
    //the line function for path 
 
    var lineFunction = d3.svg.line() 
 
     .x(function(d) { return d.x; }) 
 
     .y(function(d) { return d.y; }) 
 
     .interpolate("linear"); 
 

 
    //Main svg container 
 
    var mySVG = d3.select("svg"); 
 

 
    //defining the lines 
 
    var path = mySVG.append("path"); 
 

 
    //plotting lines 
 
    path 
 
     .attr("d", lineFunction(customData)) 
 
     .attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; }) 
 
     .attr("stroke-width", 2) 
 
     .attr("fill", "none"); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="//d3js.org/d3.v3.min.js"></script></script> 
 
    <svg width="500px" height="500px"></svg>

источник

2016-11-11 09:10:03 Chetan

помогите с новой версией. Хотя я согласен со старой версией, ее запуск ... – Deadpool

Как Четан уже упоминалось, это версия проблема вашего включаемого файла D3. Вы включаете D3 V4, но используете синтаксис D3 V3.

Внутри V4 они удалили d3.svg. Итак, все, что вам нужно сделать, это изменить d3.svg.line() на d3.line(), и он должен работать.

Ref: d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined

EDIT-1: попробуйте этот код

var svg; 
//The data for our line 
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}]; 

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

//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");

источник

2016-11-11 09:19:47 endkugelfang

index.html: 25 Uncaught TypeError: d3.line (...). X (...). Y (...). Интерполяция не является функцией (...) <------- Это ошибка, которую я получаю сейчас, после изменения d3.line(). – Deadpool

Помогите добавить скрипку с новым кодом версии? – Deadpool

Поскольку .interpolate также больше не является частью d3.line() в V4. Взгляните на ссылку I, связанную с API D3 V4 :) – endkugelfang

Создание линейной диаграммы с ошибкой получения d3

ответ

Смежные вопросы