Just Change Tick labels

Question

I have plotted scatterplot but i want to replace the tick labels only. It Should not replot again. I used forced directed scatterplot which requires integer for x and y axis, after plotting i want to replace the y-axis label. Here is the plunker

https://plnkr.co/edit/ufnBOwQEoTOrP1mUTKhC?p=preview

I want to replace just the names of d.sepalLength to d.name. alert shows correct value but they are not getting appended correctly on the y-axis. Added the below code to replace the tick labels. Please help

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.extent(data, function(d) { alert(d.name);return d.name; }));

Answer 1

The brute force way is to search if the value that will be rendered in the tick exist in your array, if so then replace it with the name

var data =[
  {sepalLength: "0", sepalWidth: 3.5, name: "AT"},
  {sepalLength: "0", sepalWidth: 3.5, name: "AT"},
  {sepalLength: "0", sepalWidth: 3.5, name: "AT"},
  {sepalLength: "0", sepalWidth: 3.5, name: "AT"},
  {sepalLength: "1", sepalWidth: 3.0, name: "AS"},
  {sepalLength: "2", sepalWidth: 2.5, name: "AM"},
  {sepalLength: "3", sepalWidth: 2.0, name: "CS"},
  {sepalLength: "4", sepalWidth: 1.5, name: "CT"},
  {sepalLength: "5", sepalWidth: 1.0, name: "CX"}
]

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(d, i) {
      var inData = data.filter(function (v) { return +v.sepalLength === d })
      return inData.length ? inData[0].name : d
    });

For a more robust solution you should set fixed values for the ticks with scale.tickValues based on sepalLength

demo