交換時間和線性縮放取決於用戶選擇

我正在構建一個小部件，讓用戶決定要繪製什麼數量以繪製數量（在bl.ocks上構建此animated scatter plot。對於數量而言，此工作正常，但我也有日期的數量，我希望用戶能夠繪製這些也以同樣的方式，以及對非日期數量交換時間和線性縮放取決於用戶選擇

原來的線性縮放和軸設置像這樣的全局函數：

var xScale = d3.scale.linear() // xScale is width of graphic 
    .domain([0, d3.max(dataset, function(d) { 
     return d[0]; // input domain 
    })]) 
    .range([padding, canvas_width - padding * 2]); // output range 

var yScale = d3.scale.linear() // yScale is height of graphic 
    .domain([0, d3.max(dataset, function(d) { 
     return d[1]; // input domain 
    })]) 
    .range([canvas_height - padding, padding]); // remember y starts on top going down so we flip 

// Define X axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .ticks(5); 

// Define Y axis 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(5);

我的希望是我可以在click函數中修改這些全局變量，甚至改變縮放，以及該會反饋到軸變量以及自然，所以我把這個點擊功能裏面：

if(types[xName]==3){ 
    console.log("resetting x scale to time type"); 
    xScale = d3.time.scale().range([padding, canvas_width - padding * 2]); // output range  
} 
else{ 
    // Create scale functions 
    xScale = d3.scale.linear() // xScale is width of graphic 
    .domain([0, d3.max(dataset, function(d) { 
     return d[0]; // input domain 
    })]) 
    .range([padding, canvas_width - padding * 2]); // output range 


} 

    xScale.domain([0, d3.max(dataset, function(d) { 
     return d[0]; })]); 
if(types[xName] == 1){ 
     xScale.domain([d3.max(dataset, function(d) { 
    return d[0]; }), 0]); 
} 

if(types[yName]==3){ 
    console.log("resetting y scale to time type"); 
    yScale = d3.time.scale().range([canvas_height - padding, padding]); // remember y starts on top going down so we flip 
} 
else { 
    yScale = d3.scale.linear() // yScale is height of graphic 
    .domain([0, d3.max(dataset, function(d) { 
     return d[1]; // input domain 
    })]) 
    .range([canvas_height - padding, padding]); // remember y starts on top going down so we flip 
} 

    yScale.domain([0, d3.max(dataset, function(d) { 
     return d[1]; })]); 
if(types[yName] == 1){ 
     yScale.domain([d3.max(dataset, function(d) { 
    return d[1]; }), 0]); 
}

時，它的最新數據我也使用parseDate適當的數據。上面（和完整的代碼是here和widget here，有問題的日期類型存儲在Created中）當我選擇日期類型時，將所有點放在一個瘋狂的位置上，所有的點都在一條直線上，而更糟糕的是仍然會產生以下錯誤：

Error: Invalid value for <circle> attribute cx="naN" where I assume this is giving an error from the following code: 

    svg.selectAll("circle") 
     .data(dataset) // Update with new data 
     .transition() // Transition from old to new

... .attr（「CX」，函數（d）{ 返回xScale等（d [0]）; //圓的x }）

所以我假定xScale在轉換爲時間尺度時根本無法正常工作。我究竟做錯了什麼？感謝您的任何更正或故障排除建議。

來源

2015-11-16 helloB

cx計算爲NaN，因爲您正在存儲的數據創建爲，因爲時間戳示例爲："created":1447686953並且您正在編寫解析日期函數。

var parseDate = d3.time.format("%Y%m%d").parse;

這是不正確的，因爲日期不是20151223格式。

所以你建議的比例計算錯誤。

所以你需要轉換成日期做到這一點：

if(types[xName]== 3){ 
    newNumber1 = new Date(data[i][xName]*1000); 
    } 

    var newNumber2 = data[i][yName]/divisor[types[yName]]//Math.floor(Math.random() * maxRange); // New random integer 
    if(types[yName]== 3){ 
    newNumber2 = new Date(data[i][yName]*1000); 
    }

希望這有助於！

來源

2015-11-17 00:57:10 Cyril

交換時間和線性縮放取決於用戶選擇

回答

相關問題