svg - Draw line with d3.js using separate, fixed x & y input arrays -
I have different x and y arrays and want to connect the dots using a line path. This is about the simplest possible example, but I do not mess much about writing the function. Here's my code:
& lt ;! DOCTYPE html & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Body & gt; & Lt; Script src = "http://d3js.org/d3.v3.min.js"> & Lt; / Script & gt; & Lt; Script & gt; 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)). Ranges ([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 [ ("Width", width + margin.left + margin.right) .attr ("height", height + margin.top + margin.bottom) svg.append ("path") .attr ("class", "line" ) .attr ("d", piece) & lt; / script> & lt; / body & gt; but it returns an error Uncount Type error: The property 'length' of the undefined can not be read, hence d3.svg.line) is not the correct form of is wrong? I do not pray any typo
Based on the location of the article d3.svg.line , I think it is difficult to know about this function without the array expected. Therefore: var xy = []; (var i = 0; i & lt; xdata. Length; i ++) {xy.push ({x: xdata [i], y: ydata [i]});} I .domain and fragment have other changes related to the function. Here are the results of my efforts.
Comments
Post a Comment