CODEWITHSUNDEEP
javascriptd3.jsgraphcharts
ditto
ditto

Reputation: 6287

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

My line chart uses entries.value to make its y.axis, but what I'm wanting to do is make the absolute centre of the y axis be the number from goal.value.

https://jsfiddle.net/everina/hdz2oxhb/1/ so in this example you see the dashed line, that is the goal.value, I want to make it so that the dashed line is in the centre of the graph. (so where the 15 number is now) I'm unsure how to do this.

Currently the dashed line is only in view if the entries.value are close enough to 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 is where the y axis is made. I need to edit this to somehow force it to use goal.value as the 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 I make the 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));

}

Upvotes: 1

Views: 529

Answers (1)

George Houpis
George Houpis

Reputation: 1729

Change your y domain on the axis such that your 'goal.value' is at the center of the 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/

Upvotes: 2

Related Questions