D3.js - 動態更改序號秤

我有下面一段代碼，它會在SVG容器上進行鼠標移動，並根據鼠標移動縮小/增大可視化的高度/寬度。當用戶在x方向上有一個鼠標移動時，圖表上的橫條會顯得很緊張：x屬性會增加2或3，然後恢復到之前的狀態：頁面上的rects會右移幾個像素，然後回到原來的位置。D3.js - 動態更改序號秤

有沒有我如何改變序數的規模的錯誤？或者我應該使用變換而不是操縱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

來源

2016-04-16 wootscootinboogie

我做內超時的重新呈現功能（希望這個解決你提到的問題）

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

工作代碼here

來源

2016-04-17 00:52:12 Cyril

D3.js - 動態更改序號秤

回答

相關問題