在下面的例子中,我使用了一個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 ...
貌似版本的問題,我 – Chetan
你是否包含在您的庫腳本上面?你可能只是想我會問。 –