D3 Line chart - display value label on Y axis tick and a not scale

Question

I'd like to print a label on the Y axis instead of a scaled tick range. Here is my dataset, where I want wish to print data.values[i].label on the Y axis.

var data = [
  {
    name: "USA",
    values: [
      {date: "2000", price: "500", label: "High"},
      {date: "2001", price: "400", label: "High"},
      {date: "2002", price: "300", label: "Medium"},
      {date: "2003", price: "200", label: "Medium"},
      {date: "2004", price: "100", label: "Low"},
      {date: "2005", price: "200", label: "Medium"}
    ]
  }
];

I figured I need to do something on line 157 like was answered here but I would need to pass the values[i] in, and not just the price. Something like

var yAxis = d3.axisLeft(yScale).tickFormat( function(d) { return d.label } );

Some guidance would be appreciated. I've been testing it on codepen here

Answer 1

希望对您有帮助

var yAxis = d3.axisLeft(yScale).ticks(5).tickFormat( function(d, i) { return data[0].values[i].label;  } );