visualization - 构建垂直交叉过滤器图表

Question

从基础开始Crossfilter例如，我想创建一个垂直而不是水平显示条形图的替代可视化。也就是说，基本上翻转条形图的轴。

修改 original 很容易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);

这些微小的变化使条形打印得很好，但它不处理带有刻度的 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)**");