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

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

这些细微的变化可以很好地打印条形图，但它不能处理带有刻度的 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)**");