Svg 使用单独的固定x&；与d3.js画线；y输入阵列_Svg_D3.js

Svg 使用单独的固定x&；与d3.js画线；y输入阵列

svg d3.js

Svg 使用单独的固定x&；与d3.js画线；y输入阵列,svg,d3.js,Svg,D3.js,我有单独的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, l

我有单独的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>


var margin={顶部：20，右侧：20，底部：20，左侧：20}，
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
变量扩展数据=d3.范围（20）；
var ydata=[1,4,5,9,10,14,15,15,11,10,5,5,4,8,7,5,5,5,5,8,10]；
var xscl=d3.scale.linear（）
.域（d3.范围（扩展数据））
.范围（[0，宽度]）
var yscl=d3.scale.linear（）
.域（d3.范围（ydata））
.范围（[高度，0]）
var slice=d3.svg.line（）
.x（函数（d）{返回xscl（扩展数据[d]）；}）
.y（函数（d）{return yscl（ydata[d]）；}）
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，切片）

但是它返回一个错误

uncaughttypeerror:无法读取未定义的属性'length'，因此d3.svg.line（）
返回的函数显然没有正确的形式。发生了什么？我祈祷不要打字错误
 d3.svg.line只能获取一个数据源。但是，您可以通过将两个数据源放入一个对象来为其提供数据源：
newData = {x: xdata, y: ydata};

 var slice = d3.svg.line()
  .x(function(d,i) { return xscl(d.xdata[i]);})
  .y(function(d,i) { return yscl(d.ydata[i]);})

然后将直线函数指向newData，您应该设置：
 svg.append("path")
  .attr("class", "line")
  .attr("d", slice(newData))

但是，通常情况下，最好构建一个坐标对数组，因为这正是它所期望的。
根据Elijah关于d3.svg.line
的点评，我认为如果不按照此函数的预期放置数组，就很难做到这一点。因此：
var xy = [];
for(var i=0;i<xdata.length;i++){
   xy.push({x:xdata[i],y:ydata[i]});
}

var xy=[]；
对于（var i=0；i我知道已经一年多了，但我也不得不处理这个问题。
将路径数据（x，y）存储在两个单独的数组中比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))

查看更新的fiddle
您介意看一下吗？正在创建路径，但没有数据点。看起来像slice（xy）
为null
。谢谢。我从d3.svg.line
函数中删除了I
。我来自R
，而JS
数据结构非常糟糕。它们很难阅读，而且似乎过于复杂。我想d3.JS
非常定期地需要这种格式的数据，我就是这么想的很好，但我还没有找到这是在哪里记录的。我要么错过了它，要么它是假设的，这对noobies来说很难。非常感谢，我在这里学到了一些非常有用的东西。YMW。D3有相当多的挑战…我们都喜欢它：）我在最后的版本中添加了额外的注释。它可能会帮助正在学习d3
思维方式的其他人。