d3.js - join data update behavior wired

Question

This demo try to update data when click the graph. it use the join method but looks like data and axis have been overlapped after click. the previous drawing not been cleared!

console.clear()
click_to_update()
function click_to_update() {
  var svg = d3.select('body').append('svg')
    .attr('width',600)
    .attr('height',400)
    .style('border','5px solid red')
  var frame = svg.append('g').attr('class','frame')
  frame.append('g').attr('class','xaxis')
  frame.append('g').attr('class','yaxis')
  
  d3.select('svg').on('click', function(){
    var data = fetch_data()
    refresh_graph(data)
  })

  var data = fetch_data()
  refresh_graph(data)

  function refresh_graph(data){
    var svg = d3.select('svg')
    var colors = d3.scaleOrdinal(d3.schemeSet3)
    var margin = {left: 40,top: 10, right:10,bottom: 60},
        width = +svg.attr('width') - margin.left - margin.right,
        height = +svg.attr('height') - margin.top - margin.bottom;

    var g = d3.select('.frame')
  .attr('transform',`translate(${margin.left},${margin.top})`)

    var xrange = data.map(function(d,i) { return i; })
    var x = d3.scalePoint()
    .domain(xrange)
    .range([0, width]);

    var ymax = d3.max(data,d => d.value)
    var y = d3.scaleLinear()
    .domain([0,ymax])
    .range([height, 0]);

    var drawpath = function(d,i) {
      var ax = x(i)
      var ay = y(d.value)
      var bx = x(i)
      var by = y(0)
      var path = ['M',ax,ay,'L',bx,by]
      return path.join(' ')
    }

    var g1 = g.selectAll('path')
    .data(data)
    .join('path')
      .attr('stroke','gray')
    .attr('stroke-width',1)
      .style('fill', (d, i) => colors(i))
      .transition()
      .attr('d', drawpath)

    g.selectAll('circle')
    .data(data)
        .join('circle')
      .attr('fill','red')
      .attr('cx',(d,i) => x(i))
      .attr('cy',(d,i) => y(d.value))
      .attr('r',5)

    var xaxis = d3.select('.xaxis')
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

    var yaxis = d3.select('.yaxis')
    .attr('transform','translate(-5,0)')
    .call(d3.axisLeft(y));
  }

  function fetch_data(){
    var num = parseInt(Math.random()*20) + 5
    var data = d3.range(num).map(d => {
      return {value:Math.random()}
    })
    return data
  }
}

d3.js - join data update behavior wired

0 Answers