javascript - D3 Line Chart: Setting Y.domain values to centre on a specific number -


my line chart uses entries.value make y.axis, i'm wanting make absolute centre of y axis number goal.value.

https://jsfiddle.net/everina/hdz2oxhb/1/ in example see dashed line, goal.value, want make dashed line in centre of graph. (so 15 number now) i'm unsure how this.

currently dashed line in view if entries.value close enough it.

var entries = [{"date":"2016-01-06","value":15},{"date":"2015-11-17","value":15.4},{"date":"2015-11-11","value":16.5},{"date":"2015-09-24","value":15.1},{"date":"2015-08-22","value":15},{"date":"2015-08-12","value":15},{"date":"2015-07-30","value":14.6},{"date":"2015-07-19","value":14.8},{"date":"2015-07-18","value":14.9},{"date":"2015-07-12","value":14.9},{"date":"2015-07-08","value":14.9},{"date":"2015-06-29","value":14.3},{"date":"2015-06-21","value":14.5},{"date":"2015-06-18","value":14.7},{"date":"2015-06-09","value":15},{"date":"2015-06-08","value":14.1},{"date":"2014-12-06","value":13.4},{"date":"2014-09-10","value":13.1},{"date":"2014-08-01","value":14.2},{"date":"2014-07-07","value":15},{"date":"2014-05-31","value":14},{"date":"2014-05-24","value":15},{"date":"2014-05-14","value":15},{"date":"2014-05-13","value":14},{"date":"2014-05-08","value":14.5},{"date":"2014-05-02","value":15}],     goal = {"value":13.5,"date":"2014-05-02"};  function enter(data, goal) {      data.foreach(function(d) {         d.date = parsedate(d.date);         d.value = +d.value;     });      data.sort(function(a, b) {         return a.date - b.date;     });    x.domain([data[0].date, data[data.length - 1].date]);    // here y axis made. need edit somehow force use goal.value middle number   y.domain(d3.extent(data, function(d) { return d.value; }));    svg.append("path")       .datum(data)       .attr("class", "area")       .attr("d", area);    svg.append("path")       .datum(data)       .attr("class", "line")       .attr("d", line);    svg.append("g")       .attr("class", "x axis")       .attr("transform", "translate(0," + height + ")")       .call(xaxis);    svg.append("g")       .attr("class", "y axis")         .attr("transform", "translate(" + width + ",0)")       .call(yaxis);      // here make dashed goal line     svg.append("line")         .attr("class", "goal")         .attr("y1", y(goal.value))         .attr("x1", x(data[0].date))         .attr("y2", y(goal.value))         .attr("x2", x(data[data.length - 1].date));  } 

change y domain on axis such 'goal.value' @ center of domain.

  //y.domain(d3.extent(data, function(d) { return d.value; }));   var e = d3.extent(data, function(d) { return d.value; });   var e_max_delta = math.max( math.abs( e[0] - goal.value ), math.abs( e[1] - goal.value ) );   y.domain([goal.value - e_max_delta, goal.value + e_max_delta]); 

https://jsfiddle.net/hdz2oxhb/2/


Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -