使用d3在单独的阵列中绘制具有x轴和y轴值的折线图数据

Question

我从后端获取数据作为对象数组。我正在做一些客户端修改数据，使其成为，

var lineXData = xValue; // x value is an array of numbers
var lineYData = yValue; // y value is an array of numbers

我正在经历一个例子，他们正在构建这条线，

 var lineFunc = d3.svg.line()
   .x(function (d) {
      return xRange(d.x);
   })
   .y(function (d) {
      return yRange(d.y);
   })
   .interpolate('basis');

 vis.append("svg:path")
   .attr("d", lineFunc(lineData))
   .attr("stroke", "blue")
   .attr("stroke-width", 2)
   .attr("fill", "none");

以下是其示例http://codepen.io/jay3dec/pen/wKLBx/

的codepen链接

在我的例子中，x轴和y轴数据位于不同的数组中。如何将x轴数组传递到xrange和yaxis数组到lineFunc内的y范围？这可能吗？或者在d3中使用这种方法是不对的？