我有独立的x和y数组,想要使用线路路径连接这些点。这似乎是最简单的例子之一,但我不太理解如何编写该函数。这是我的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src = "http://d3js.org/d3.v3.min.js"> </script>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var xdata = d3.range(20);
var ydata = [1, 4, 5, 9, 10, 14, 15, 15, 11, 10, 5, 5, 4, 8, 7, 5, 5, 5, 8, 10];
var xscl = d3.scale.linear()
.domain(d3.extent(xdata))
.range([0, width])
var yscl = d3.scale.linear()
.domain(d3.extent(ydata))
.range([height, 0])
var slice = d3.svg.line()
.x(function(d) { return xscl(xdata[d]);})
.y(function(d) { return yscl(ydata[d]);})
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
svg.append("path")
.attr("class", "line")
.attr("d", slice)
</script>
</body>
但是它返回了一个错误Uncaught TypeError: Cannot read property 'length' of undefined
,因此由d3.svg.line()
返回的函数形式不正确。问题在哪里?我祈求不是拼写错误!
d3.svg.line
函数中删除了i
。我来自于R
,而JS
的数据结构让我很头疼。它们很难阅读,似乎过于复杂。我猜d3.js
经常需要以这种特定格式呈现数据,这很好,但我还没有找到文档在哪里。我可能错过了它,或者它被假定为已知,这对新手来说很困难。非常感谢,我在这里学到了非常有用的东西。 - Bryan Hansond3
思维方式的人。 - Bryan Hanson