D3.js - 動的に尺度を変更する

Question

SVGコンテナでマウスを動かし、マウスの動きに基づいて視覚化の高さ/幅を縮小/拡大する次のコードを取得しました。ユーザーがx方向にマウスを動かすと、グラフ上の棒グラフが不安定になります。x属性は2または3ずつ増加し、以前のものに戻ります。ページ上の矩形は数ピクセル右にスクロールします、元の位置にスナップバックします。

序数をどのように変更しているのですか？または、私はX値を操作する代わりに変換を使用する必要がありますか？

'use strict'; 
var d3 = require("d3"); 


var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 




var chartData; 
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 + ")"); 



let render = (e,data)=>{ 
    width += d3.event ? d3.event.movementX : 0; //changing x axis here 
    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1); 

    var y = d3.scale.linear() 
     .range([data.height, 0]); 
// 
x.domain(data.map(function(d) { return d.letter; })); 
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 
// 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(10, "%") 
     .tickSize(1); 

     var yAxisEl = svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Frequency"); 

     var bars = svg.selectAll(".bar") 
      .data(data) 
     .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { 
      console.log(x(d.letter)); 
      var currX = x(d.letter); //sometimes gives wrong valuse 
      return currX; 
      }) 
      .attr("width", function(){ 
      return x.rangeBand(); 
      }) 
      .attr("y", function(d) { return y(d.frequency); }) 
      .attr("height", function(d) { return Math.abs(height - y(d.frequency)); }) 


} 
let rerender=(data)=>{ 
    d3.select("svg").select("g").selectAll("*").remove(); 
    render(null,data); 
} 
d3.tsv("data.tsv", type, function(error, data) { 
    if (error) throw error; 
     chartData = data; 
     chartData.height = height; 
     chartData.width = width; 
     render(error,chartData); 
    }); 

d3.selectAll('svg').on('mousemove',function(){ 
    if(chartData){ 
    chartData.height += d3.event.movementY; 
    rerender(chartData); 
    } 
}); 

データ

letter frequency 
A .08167 
B .01492 
C .02782 
D .04253 
E .12702 
F .02288 
G .02015 

Answer 1

私が働いコードhere

var rerender = (data) => { 
    if (myVar){ 
    clearTimeout(myVar);//clear timeout if called before 1 millisecond 
    } 
    myVar = setTimeout(function(){ 
     d3.select("svg").select("g").selectAll("*").remove(); 
     render(null, data); 

    }, 1); 
} 

（これはあなたが参照する問題を修正願っています）時間内で再レンダリング機能を作りました