D3條形圖上的魚眼寬度

我一直在嘗試創建一個只有x軸被扭曲的d3魚眼笛卡爾變形的垂直條形圖。D3條形圖上的魚眼寬度

我已經成功地用下面的代碼扭曲鼠標懸停垂直條的x位置：

var maxMag = d3.max(dataset, function(d) { return d.value[10]; }); 
var yScale = d3.scale.linear().domain([0, maxMag]).range([0, h]); 
var xScale = d3.fisheye.scale(d3.scale.linear).domain([0, dataset.length]).range([0, w]).focus(w/2); 

var bar = svg.append("g") 
     .attr("class", "bars") 
    .selectAll(".bar") 
     .data(dataset) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("y", function(d) { 
      return h - yScale(d.value[10]); 
     }) 
     .attr("width", w/dataset.length) 
     .attr("height", function(d) { 
      return yScale(d.value[10]); 
     }) 
     .attr("fill", function(d) { 
      return (d.value[10] <= 6? "yellow" : "orange"); 
     }) 
     .call(position); 

// Positions the bars based on data. 
function position(bar) { 
    bar.attr("x", function(d, i) { 
     return xScale(i); 
    }); 
} 

svg.on("mousemove", function() { 
    var mouse = d3.mouse(this); 
    xScale.distortion(2.5).focus(mouse[0]); 

    bar.call(position); 
});

然而，在這一點上，在寬度採用魚眼鏡頭仍是一個謎給我。我已經嘗試了幾種方法，例如使用魚眼標尺進行寬度調整，但不能按預期工作。

我想要做的是在鼠標懸停時展開一個條的寬度，就像單個垂直條在鼠標懸停時使用笛卡爾變形一樣。

任何線索或幫助將非常感謝！

編輯：改變計算x位置使用索引，而不是時間，以防止在圖表中條之間的大間隙的方法

溶液：由於Superboggly，我已編輯的位置函數，以如下所示：

// Positions the bars based on data. 
function position(bar) { 
    bar.attr("x", function(d, i) { 
     return xScale(i); 
    }); 
    bar.attr("width", function(d, i) { 
     return xScale(i+1) - xScale(i); 
    }) 
}

來源

2012-10-21 Dexter Tan

目前您的酒吧的寬度是根據您的全寬除以您的數據集大小正確嗎？相反，如果您根據時間計算寬度，例如你的全職跨度除以數據集大小？然後每個條對應一段時間，您可以使用「位置」功能和條的開始和結束來計算寬度。

來源

2012-10-22 18:35:59 Superboggly

謝謝你的幫助！雖然我發佈上面的問題後我的代碼已經改變了，但是你這樣計算寬度的建議讓我想到將寬度計算爲當前條的x位置和下一個條的差值。我將編輯上面的問題，就像我的新代碼一樣，幷包括解決問題的代碼。謝謝！ –

沒問題 - 順便說一句，這是一個相當整潔的可視化，你正在努力！ – Superboggly

謝謝！我嘗試;） –

D3條形圖上的魚眼寬度

回答

相關問題