使用通用函數繪製線d3js

Question

我正在使用d3js繪製多線圖。

我的劃線功能如下。

meanLine = d3.svg.line() 
      .interpolate('linear') 
      .x(function (d) { 
       return xScale(d.date); 
      }) 
      .y(function (d) { 
       return yScale(d.mean); 
      }); 

//data is declared at top 
group.append('svg:path') 
      .attr({ 
       d: meanLine(data), 
       "stroke": "rgba(" + color + ", 0.8)", 
      }); 

這裏的日期和平均值是硬編碼的。我想要一個通用函數，我可以通過哪個值來繪製線條。

我想是這樣

lineFunc = d3.svg.line() 
      .interpolate('linear') 
      .x(function (d, xval) { 
       return xScale(d[xval]); 
      }) 
      .y(function (d, yval) { 
       return yScale(d[yval]); 
      }); 

//data is declared at top 
group.append('svg:path') 
      .attr({ 
       d: lineFunc(data, xval, yval), 
       "stroke": "rgba(" + color + ", 0.8)", 
      }); 

Answer 1

你可以做這樣的事情......這裏myLineFun房子你d3 line function：

//make a function which houses the line function 
var myLineFun = function(data, xval, yval){ 
     //the line function 
     var lineFunc = d3.svg.line() 
      .interpolate('linear') 
      .x(function (d) { 
       return xScale(d[xval]);//xval passed in the argument 
      }) 
      .y(function (d) { 
       return yScale(d[yval]);//yval passed in the argument 
      }); 
     return lineFunc(data);//this will return the d attribute 
} 

然後再調用這個：

group.append('svg:path') 
      .attr({ 
       d: myLineFun(data, xval, yval), 
       "stroke": "rgba(" + color + ", 0.8)", 
      }); 

希望這有助於！