D3.js 标准化堆叠条形图到堆叠条形图

嗨，我是D3新手，我正在尝试将标准化的堆叠条形图转换为堆叠条形图。我有一个常用的下拉菜单，可以在两种图表（标准化堆叠条形图和堆叠条形图）之间切换。在标准化叠层条形图和叠层条形图之间切换是简单的还是需要进行任何重大更改

我已经为它创建了一个

var svg=d3.选择（“svg”），
保证金={
前20名，
右：60，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
变量y=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
.对齐（0.1）；
var x=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“02CA22”、“FB5652”、“FFB005”）；
var stack=d3.stack（）
.偏移量（d3.stackOffsetExpand）；
d3.csv（“data.csv”），类型，功能（错误，数据）{
如果（错误）抛出错误；
数据排序（函数（a，b）{
返回b[data.columns[1]]/b.total-a[data.columns[1]]/a.total；
});
y、 域（data.map）（函数（d）{
返回d.状态；
}));
z、 域（data.columns.slice（1））；
变量系列=g.selectAll（“.serie”）
.data（堆栈.键（数据.列.切片（1））（数据））
.enter（）.append（“g”）
.attr（“类别”、“系列”）
.attr（“填充”，功能（d）{
返回z（d键）；
});
系列。选择全部（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
.attr（“y”，函数（d）{
返回y（d.数据状态）；
})
.attr（“x”，函数（d）{
返回x（d[1]）；
})
.attr（“宽度”，函数（d）{
返回x（d[0]）-x（d[1]）；
})
.attr（“高度”，y.带宽（））；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x）.ticks（10，“%”）；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.调用（d3.左（y））；
变量图例=系列附加（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d）{
var d=d[0]；
返回“translate”（+（（x（d[0]）+x（d[1]））/2）+”，“+（y（d.data.State）-y.bandwidth（））+”；
});
图例。追加（“行”）
.attr（“y1”，5）
.attr（“x1”，15）
.attr（“x2”，15）
.attr（“y2”，12）
.attr（“笔划”和“#000”）；
图例。追加（“文本”）
.attr（“x”，9）
.attr（“dy”，“0.35em”）
.attr（“填充”、“千”）
.style（“字体”，“10px无衬线”）
.文本（功能（d）{
返回d.key；
});
});
函数类型（d、i、列）{
对于（i=1，t=0；i

不，这并不简单。你必须做六次修改（就像把水平条形图修改成垂直条形图一样）

以下是必要更改的列表：

删除

.offset（d3.stackOffsetExpand）

。根据API：

应用零基线并规范化每个点的值，以便背线始终为一

因此，堆栈函数应为：

var stack = d3.stack()
    .offset(d3.stackOffsetNone);

或者您可以简单地删除

.offset

从以下位置更改您的排序：

data.sort(function(a, b) {
    return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total;
});

为此：

    data.sort(function(a, b) { return b.total - a.total; });

设置x比例的域：

x.domain([0, d3.max(data, function(d) { return d.total; })]).nice();

var x = d3.scaleLinear()
    .rangeRound([0, width]);

反转x比例的范围：

x.domain([0, d3.max(data, function(d) { return d.total; })]).nice();

var x = d3.scaleLinear()
    .rangeRound([0, width]);

更改矩形的

x

和

width

：

.attr("x", function(d) {
    return x(d[0]);
 })
 .attr("width", function(d) {
     return x(d[1]) - x(d[0]);
 })

以下是普朗克：