title: Unable to change X/Y axis value in D3
body: <p>I am using the following code to  create a D3 figure for.In This,I am trying to plot a few weather related data.In the code ,I am trying change the axis value but unable to do it. It is getting fixed to the default value I have provided in the beginning. Can someone please help me with it. The dataset I am using is json data(link:<a href="https://drive.google.com/file/d/13-unvzxvjmFWVgfSKRJObZJc81VriyIf/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/13-unvzxvjmFWVgfSKRJObZJc81VriyIf/view?usp=sharing</a>).</p>
  
  <p>following is the code I am using.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;meta charset="utf-8"&gt;
  
  
  
  &lt;style&gt;
  body {
    font: 11px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .dot {
    stroke: #000;
  }
  
  .tooltip {
    position: absolute;
    width: 200px;
    height: 28px;
    pointer-events: none;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,       //900
      height = 500 - margin.top - margin.bottom;      //450
  
  // setup fill color
      var colorScale = d3.scale.linear()
                              .domain([-15, 30])
                              .range(["blue","red"]);
  
  // add the graph canvas to the body of the webpage
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  // add the tooltip area to the webpage
  var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
  var selectData = [ { "text" : "meantempm" },
                     { "text" : "meanpressurem" },
                     { "text" : "meanwindspdm" },
                     { "text" : "humidity" },
                     ]
     var body = d3.select('body');
  // load data
  d3.json("weatherdata.json", function(error, data) {
  
    // change string (from CSV) into number format
      data.forEach(function(d) {//to check the utility
      d.meanwindspdm = +d.history.dailysummary[0].meanwindspdm;
      d.meantempm = +d.history.dailysummary[0].meantempm;
      d.meanpressurem = +d.history.dailysummary[0].meanpressurem;
      d.humidity = +d.history.dailysummary[0].humidity;
  
  //    console.log(d);
    });
  
  
  // setup x
  var xExtent = d3.extent(data, function(d) { return (d.meanpressurem);}), //given
      xScale = d3.scale.linear().domain(xExtent).range([0, width]), // value -&gt; display   //given 
      xValue = function(d) { return ((d.meanpressurem));}, // data -&gt; value
      xMap = function(d) { return xScale(d.meanpressurem);}, // data -&gt; display
      xAxis = d3.svg.axis().scale(xScale).orient("bottom"); //given
  
  // setup y
  var yExtent = d3.extent(data, function(d) {return (d.meantempm);}),
      yValue = function(d) { return d.meantempm;}, // data -&gt; value
      yScale = d3.scale.linear().domain(yExtent).range([height, 0]), // value -&gt; display
      yMap = function(d) { return yScale(yValue(d));}, // data -&gt; display
      yAxis = d3.svg.axis().scale(yScale).orient("left");
  
  //new addition
    // Select X-axis Variable
    var defs = body.append('defs')
      .text('X-Axis:')
    var yInput = body.append('select')
        .attr('id','xSelect')
        .on('change',xChange)
      .selectAll('option')
        .data(selectData)
        .enter()
      .append('option')
        .attr('value', function (d) { return d.text }) ///check
        .text(function (d) { return d.text ;})
    //body.append('br')
  
    // Select Y-axis Variable
    var span = body.append('defs')
        .text('Y-Axis: ')
    var yInput = body.append('select')
        .attr('id','ySelect')
         .on('change',yChange)
      .selectAll('option')
        .data(selectData)
        .enter()
      .append('option')
        .attr('value', function (d) { return d.text })//check
        .text(function (d) { return d.text ;})
    body.append('br')
  
  //new addition upto 
  
    // x-axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("class", "label")
        .attr('id','xAxisLabel')
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .text("meanwindspdm");
  
    // y-axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("class", "label")
        .attr('id','yAxisLabel')
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("meantempm");
  
    // draw dots
    svg.selectAll(".dot")
        .data(data)
      .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("fill", function(d){return colorScale(d.meantempm)}) 
        .on("mouseover", function(d) {
            tooltip.transition()
                 .duration(200)
                 .style("opacity", .9);
            tooltip.html(d.history.date.pretty + "&lt;br/&gt; (" + xValue(d) 
              + ", " + yValue(d) + ")")
                 .style("left", (d3.event.pageX + 5) + "px")
                 .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                 .duration(500)
                 .style("opacity", 0);
        });
  
    // draw legend
    var legend = svg.selectAll(".legend")
        .data(colorScale.domain())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  
    // draw legend colored rectangles
    legend.append("rect")
        .attr("x", width - 10)
        .attr("width", 10)
        .attr("height", 10)
        .style("fill", colorScale);
  
    // draw legend text
    legend.append("text")
        .attr("x", width - 16)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d;})
        // new addiiton/////////
  
      function yChange() {
      var value = this.value // get the new y value
      yScale // change the yScale
        .domain([
          d3.min([0,d3.min(data,function (d) { return +d.history.dailysummary[0][value] })]),
          d3.max([0,d3.max(data,function (d) { return +d.history.dailysummary[0][value] })])
          ])
      yAxis.scale(yScale) // change the yScale
      d3.select('#yAxis') // redraw the yAxis
        .transition().duration(50)
        .call(yAxis)
      d3.select('#yAxisLabel') // change the yAxisLabel
        .text(value)    
      d3.selectAll('circle') // move the circles
        .transition().duration(50)
           .delay(50)
        //.delay(function (d,i) { return i*100})
          .attr('cy',function (d) { return yScale(+d.history.dailysummary[0][value]) })
    }
  
    function xChange() {
      var value = this.value   // get the new x value
      console.log(value);
      console.log(data);
      xScale // change the xScale
          .domain([
          d3.min([0,d3.min(data,function (d) {console.log( +d.history.dailysummary[0][value] ) ; return +d.history.dailysummary[0][value] })]), 
          d3.max([0,d3.max(data,function (d) { return +d.history.dailysummary[0][value] })])
          ])
  
      xAxis.scale(xScale) // change the xScale //issue here I guess`enter code here`
      d3.select('#xAxis') // redraw the xAxis
        .transition().duration(50)
        .call(xAxis)
      d3.select('#xAxisLabel') // change the xAxisLabel
        .transition().duration(50)
        .text(value)
      d3.selectAll('circle') // move the circles
        .transition().duration(50)
        .delay(50)
        //.delay(function (d,i) { return i*100})
          .attr('cx',function (d) {  return xScale(+d.history.dailysummary[0][value]); })
  
    }
        // new addiiton upto/////////
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>