Javascript 可以在d3中创建动态网格线图吗？

我正在d3中开发一个散点图，您可以使用下拉菜单更改x轴和y轴

我能够绘制网格线，但我的问题是在为x轴或y轴拾取新值时重新绘制网格线

我希望有人能建议我该怎么做才能实现这一点

以下是我迄今为止的代码（js）：

d3.csv（'data.csv'，函数（数据）{
//CSV部分
变量body=d3。选择（'body'）
var selectData=[{“text”：“信任字”}，
{“文本”：“意外词语”}，
{“文本”：“悲伤的话”}，
{“文本”：“正面词语”}，
{“文本”：“否定词”}，
{“文本”：“恐惧词语”}，
{“文本”：“令人厌恶的词语”}，
{“文本”：“预期词语”}，
{“文本”：“愤怒的话语”}，
]
//选择X轴变量
var span=body.append（'span'）
.text（'为水平刻度选择一个情感词：'）
var xInput=body.append（'select'）
.attr（'id'，'xSelect'））
.on（'change'，xChange）
.selectAll（'选项'）
.data（选择数据）
.输入（）
.append（'选项'）
.attr（'value'，函数（d）{return d.text}）
.text（函数（d）{返回d.text；}）
body.append（'br'）
body.append（'br'）
//选择Y轴变量
var span=body.append（'span'）
.text（'为垂直刻度选择一个情感词：'）
var yInput=body.append（'select'）
.attr（'id'，'ySelect'））
.on（'change'，yChange）
.selectAll（'选项'）
.data（选择数据）
.输入（）
.append（'选项'）
.attr（'value'，函数（d）{return d.text}）
.text（函数（d）{返回d.text；}）
body.append（'br'）
//变数
变量body=d3。选择（'body'）
var margin={顶部：50，右侧：50，底部：50，左侧：50}
var h=700-margin.top-margin.bottom
var w=1350-margin.left-margin.right
var rscale=d3.scale.linear（）
//天平
var cValue=function（d）{if（parseFloat（d['emotations words']）>=0&&parseFloat（d['emotations words']）200000&&parseFloat（d['emotations words']））很抱歉，我想写一条评论，但我没有足够的声誉，所以我不得不写这条评论作为回答。您是否有可能提供一个迷你数据集，以便我可以在我的机器上运行此代码？如果我有一个数据集来运行代码，那么就更容易理解代码应该如何工作

还有，你说的网格线是什么意思？如果你指的是刻度线，那么我认为这些刻度线不会改变，无论你使用什么刻度。你将其设置为5，因此我认为始终会有5个等距的刻度线。
与其在这里转储大量代码，不如用网格线和一个非常简单的数据创建一个刻度线，我们可以向你展示如何更新它们。
d3.csv('data.csv',function (data) {
// CSV section
  var body = d3.select('body')
  var selectData = [ { "text" : "Trust words" },
                     { "text" : "Surprise words" },
                     { "text" : "Sadness words" },
                     { "text" : "Positive words"},
                     { "text" : "Negative words"},
                     { "text" : "Fear words"},
                     { "text" : "Disgust words"},
                     { "text" : "Anticipation words"},
                     { "text" : "Anger words"},
                   ]

  // Select X-axis Variable
  var span = body.append('span')
    .text('Select an Emotion word for the Horizontal scale: ')
  var xInput = body.append('select')
      .attr('id','xSelect')
      .on('change',xChange)
    .selectAll('option')
      .data(selectData)
      .enter()
    .append('option')
      .attr('value', function (d) { return d.text })
      .text(function (d) { return d.text ;})
  body.append('br')
  body.append('br')

  // Select Y-axis Variable
  var span = body.append('span')
      .text('Select an Emotion word for the Vertical scale: ')
  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 })
      .text(function (d) { return d.text ;})
  body.append('br')

  // Variables
  var body = d3.select('body')
  var margin = { top: 50, right: 50, bottom: 50, left: 50 }
  var h = 700 - margin.top - margin.bottom
  var w = 1350 - margin.left - margin.right
  var rscale = d3.scale.linear()
  // Scales
  var cValue = function(d) { if (parseFloat(d['Emotions words']) >=0 && parseFloat(d['Emotions words']) <= 200000) return 'Emotion Words NO: 0-200,000 inc'
                               else if(parseFloat(d['Emotions words']) >200000 && parseFloat(d['Emotions words']) <=350000) return 'Emotion Words NO: 200,001-350,000 inc'
                               else return 'Emotion words NO: >350,000'},
        color = d3.scale.category10();  
  var xScale = d3.scale.linear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
      d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
      ])
    .range([0,w])
  var yScale = d3.scale.linear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
      d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
      ])
    .range([h,0])

  // SVG
  var svg = body.append('svg')
      .attr('height',h + margin.top + margin.bottom)
      .attr('width',w + margin.left + margin.right)
    .append('g')
      .attr('transform','translate(' + margin.left + ',' + margin.top + ')')
  // X-axis
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(5)
  // Y-axis
  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left')
    .ticks(5)
function make_x_axis() {        
    return d3.svg.axis()
        .scale(xScale)
         .orient("bottom")
         .ticks(5)
}

function make_y_axis() {        
    return d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5)
}   
  // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
    .append('circle')
      .attr('cx',function (d) { return xScale(d['Trust words']) })
      .attr('cy',function (d) { return yScale(d['Trust words']) })
      .attr('r',function (d) { return rscale(d['Average_movie_rating'])*2;})
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill',function (d) { return color(cValue(d)); })
      .on('mouseover', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',20)
          .attr('stroke-width',3)
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',10)
          .attr('stroke-width',1)
      })
    .append('title') // Tooltip
      .text(function (d) { return 'Actor Name: ' + d['Actor_ Name'] +
                           '\nTrust words: ' + d['Trust words'] +
                           '\nSurprise words: '  + d['Surprise words']+
                           '\nSadness words: ' + d['Sadness words'] +
                           '\nPositive words: ' + d['Positive words'] +
                           '\nNegative words: ' + d['Negative words'] +
                           '\nFear words: ' + d['Fear words'] +
                           '\nDisgust words: ' + d['Disgust words'] +
                           '\nAnticipation words: ' + d['Anticipation words'] +
                           '\nAnger words: ' + d['Anger words'] +
                           '\nAverage ranking: '+ d['Average_movie_rating']})

  // X-axis
  svg.append('g')
      .attr('class','axis')
      .attr('id','xAxis')
      .attr('transform', 'translate(0,' + h + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('id','xAxisLabel')
      .attr('y',-10)
      .attr('x',w)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Trust words')
  // Y-axis
  svg.append('g')
      .attr('class','axis')
      .attr('id','yAxis')
      .call(yAxis)
    .append('text') // y-axis Label
      .attr('id', 'yAxisLabel')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Trust words')
  svg.append('g')         
        .attr("class", "grid")
        .attr("transform", "translate(0," + h + ")")
        .call(make_x_axis()
            .tickSize(-h, 0, 0)
            .tickFormat("")
        )   
  svg.append('g')         
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-w, 0, 0)
            .tickFormat("")
        )


  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 parseFloat(d[value]) })]),
        d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
        ])
    yAxis.scale(yScale) // change the yScale
    d3.select('#yAxis') // redraw the yAxis
      .transition().duration(1000)
      .call(yAxis)
    d3.select('#yAxisLabel') // change the yAxisLabel
      .text(value)    
    d3.selectAll('circle') // move the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i*100})
        .attr('cy',function (d) { return yScale(d[value]) })

  }

  function xChange() {
    var value = this.value // get the new x value
    xScale // change the xScale
      .domain([
        d3.min([0,d3.min(data,function (d) { return parseFloat(d[value]) })]),
        d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
        ])
    xAxis.scale(xScale) // change the xScale
    d3.select('#xAxis') // redraw the xAxis
      .transition().duration(1000)
      .call(xAxis)
    d3.select('#xAxisLabel') // change the xAxisLabel
      .transition().duration(1000)
      .text(value)
    d3.selectAll('circle') // move the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i*100})
        .attr('cx',function (d) { return xScale(d[value]) })
  }
    var legend = svg.selectAll(".legend")
          .data(color.domain())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });

      // draw legend colored rectangles
      legend.append("rect")
          .attr("x", w + 25)
          .attr("y", 490)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

      // draw legend text
      legend.append("text")
          .attr("x", w - 24)
          .attr("y", 500)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d) { return d;})
          .text(function(d) { return d;})
})