d3js：Stacked Horizo​​ntal Bar：如何将类别拆分为条形

Question

我在d3js中创建一个简单的水平堆积条形图。 http://jsfiddle.net/NovasTaylor/1e2pn4jb/

var stack = d3.layout.stack();

我是一个新手，所以我的代码基于原始（参见JSFiddle的评论），只有一个堆叠条。我想根据分类变量将显示分成多个条形。在我的数据中，我称之为变量＆＃34;技能＆＃34;值为值＆＃34; Windows＆＃34;和＆＃34; Linux＆＃34;。如果有人能根据数据值建议一种方法，我将非常感激。

我搜索了网络和StackOverflow，发现了几个水平堆栈的例子（但有几个垂直......）

谢谢！ 添

Answer 1

重要的是在创建level布局之前，按stack 嵌套数据。然后使用yScale作为域创建序号skill。

在这里小提琴：http://jsfiddle.net/henbox/94j0qmnv/2/

首先创建一个nest函数：

var nest = d3.nest()
    .key(function (d) {
        return d[0].level;
});

并在创建stack布局之前调用它：

//Data
dataset = stack(nest.entries(dataset));

这将按3个技能级别（开始， Intermed ， Adv ）中的每一个嵌套数据。这样做意味着您需要添加d3.layout.stack()的定义以指定如何提取值：

var stack = d3.layout.stack()
.values(function (d) {
    return d.values;
})
.x(function (d) {
    return d[0].x;
})
.y(function (d) {
    return d[0].y;
});

然后设置yScale，根据技能将数据分成两个小节（ Windows 或 Linux ）

// Define the scale for the y (ordinal) domain
var yScale = d3.scale.ordinal()
    .rangeRoundBands([0, 60], 1, 0)
    .domain(dataset.map(function (d) {
    return d[0].skill;
}));

现在剩下的就是改变为每个x确定y，width和rect属性的方式（以及与{{ 1}}元素。特别是，要将每个图层拆分为两行（基于text值），请使用新的skill：

yScale