我有单独的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()没有正确的形式.怎么了？我祈祷不是一个错字!
我知道已经有一年多了,但我也不得不处理这个问题.将路径数据(x,y)存储在2个单独的阵列中比2D阵列d3.svg.line期望的内存效率高得多.对于非常多的点,通过循环遍历所有元素来创建2D阵列,所接受的答案也是低效的.
我发现没有添加任何循环的解决方案是编写一个包装函数,d3.svg.line如下所示:
var line = function(x, y){
return d3.svg.line()
.x(function(d,i) { return x[i]; })
.y(function(d,i) { return y[i]; })
(Array(x.length));
}
然后设置路径属性:
svg.append("path")
.attr("d", line(x_array, y_array))
请在此处查看更新的小提琴