d3で動的グリッド線グラフを作成することは可能ですか？

Question

私はドロップダウンメニューを使用してx軸とy軸の両方を変更できるd3で散布図を作成しています。

私はグリッド線を描画することができましたが、私の問題は、x軸またはy軸のいずれかの新しい値が選択されたときに問題を再描画しています。

私はこれを実現するために何をすべきか教えてください。ここで

は今まで（JS）までの私のコードです：ごめんなさい

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;}) 
}) 

おかげ

Answer 1

は、私がコメントを書きたかったが、私は持っているので、私は十分評判を持っていませんこれを答えとして書く。私のマシンでこのコードを実行できるようにミニデータセットを提供する機会はありますか？コードを実行するデータセットがあれば、コードがどのように動作するはずかを理解することは簡単です。

また、グリッドラインとはどういう意味ですか？あなたがダニを意味するなら、私はそれらがあなたがどんなスケールを使用していても変わらないと思います。それを5に設定すると、常に均等に5つの目盛りがあると思います。