Question

我是D3世界的新手。在尝试将此example转换为水平分组的条形图时，我遇到了一个复杂的情况。我正在遵循this post中描述的转换点。这是我的code版本。

我已经转换了水平组图表的所有域和范围，但无法成功。

var xScale = d3.scale.linear().range([innerHeight, 0]);
var yScale = d3.scale.ordinal().rangeBands([innerWidth, 0], barPadding);

bars.attr("y", function(d, i, j) {
    return yScale(d[yColumn]) + barWidth * j;
  })
  .attr("x", 0)
  .attr("height", barWidth)
  .attr("width", function(d) {
    return xScale(d.y);
  })

非常感谢任何帮助！

Answer 1

这种转换比你最初想象的要复杂一点。在您分享的代码段中，yScale范围为var result = from c in Courses... i cant figured out here select new{ videoCount = [number of video releated to course], fileCount = [number of file releated to course], };时应为[innerWidth, 0]。以下是相关部分。您可以看到它正在运行here。

请注意，我使用stack的布局d.x作为y轴的输入，d.y作为x轴的输入。那是因为d3.layout.stack没有方向作为参数。

[0, innerHeight]

D3 JS：将垂直分组的条形图转换为水平分组的条形图

1 个答案: