構建垂直交叉過濾圖表

Question

從基本的Crossfilter示例開始，我想要創建一個替代的可視化，該垂直而不是水平顯示垂直條形圖。也就是說，基本上翻轉了條形圖的軸線。

很容易修改 barChart函數來交換圖表中的小節。我已經能夠做到這一點與這些如下更改：

var width = x.range()[1], 
    height = y.range()[0]; 

變爲

var width = x.range()[1], 
    height = y.range()[0]; 

和嵌套barPath方法

path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height); 

成爲

path.push("M", 0, ",", x(d.key), "h", y(d.value), "v9H", 0); 

這些微小的變化得到t他很好地打印了條形圖，但是它不會處理x軸的蜱蟲，也不會處理選擇畫筆。是否可以翻轉他們兩側的刷子？如果是這樣，我該怎麼做呢？

在此先感謝！

Answer 1

最簡單的方法是在chart（）中將每個圖表的「g」容器旋轉90°。

事情是這樣的：

g = div.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 + ")"+ "**rotate(90)**");