用d3創建折線圖出錯

在下面的例子中，我使用了一個lineFunction來繪製路徑的座標。我希望正確輸入代碼，仍然面臨錯誤。有人可以幫忙嗎？用d3創建折線圖出錯

片段：

<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（），它應該可以工作。

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

編輯-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未捕獲的TypeError：d3.line（...）。x（...）。y（...）。interpolate不是函數（... ）<-------這是我在做d3.line（）更改後得到的錯誤。 – Deadpool

保養添加小提琴新版本的代碼？ – Deadpool

因爲.interpolate也不再是V4中d3.line（）的一部分。看看參考鏈接和D3 V4的API :) – endkugelfang

用d3創建折線圖出錯

回答

相關問題