d3js v5 标准化堆积条形图

Question

我的目标是制作一个标准化的堆积条形图。所以，我按照这个例子：https://bl.ocks.org/mbostock/3886394，并尝试使用我自己的数据。

data.csv

lieu,cat1,cat2,cat3,cat4
zone1,59291,4186,638,3209
zone2,267961,37816,6971,58115

index.html

<div class="c_graphique1"></div>

script.js

/*Initiate svg*/
let svg = d3.select(".c_graphique1")
    .append("svg");

const width = "640";
const height = "720";
const margin = {top:20, right:20, bottom:20, left:40};

svg
    .attr("width",width)
    .attr("height",height);

/*Initiate format number*/
d3.formatDefaultLocale({
    "decimal": ",",
    "thousands": "\u2009",
    "grouping": [3]
});


/*
------------------------------------------------------
------------------------------------------------------
*/
/*Initiate data*/
d3.csv("../data/data.csv", function(d){
return{
    lieu: d.lieu,
    cat1: +d.cat1,
    cat2: +d.cat2,
    cat3: +d.cat3,
    cat4: +d.cat4
    };
}).then(function(data){

console.log(data);

/*Initiate x Axis*/
const x = d3.scaleBand()
    .padding(0.1)
    .align(0.1)
    .rangeRound([margin.left, width-margin.right])
    .domain(data.map(d=>d.lieu));


const xAxis = d3.axisBottom(x)
    .ticks(10)
    .tickSize(6);

/*Initiate y Axis*/
const y = d3.scaleLinear()
    .rangeRound([height - margin.bottom, margin.top]);

const yAxis = d3.axisLeft(y)
    .ticks(10, " %")
    .tickSize(6);


/*Initiate z Axis*/
const z = d3.scaleOrdinal()
    .range(["#e2e8a0","#33b0e6","#e73b26","#ece42c"])
    .domain(data.columns.slice(1)); //remove columns you don't need


/*Initiate stack */
const stack = d3.stack()
    .offset(d3.stackOffsetExpand);


/*
------------------------------------------------------
------------------------------------------------------
*/

/*Call Axis*/

svg
    .append("g")
    .attr("class","axis x_axis")
    .attr("transform", `translate(0,${height-margin.bottom})`)
    .call(xAxis);

svg
    .append("g")
    .attr("class","axis y_axis")
    .attr("transform",`translate(${margin.left},0)`)
    .call(yAxis);


/*Initiate Serie*/
const serie = svg.selectAll(".serie")
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
    .attr("class","serie")
    .attr("fill",d=>z(d.key));

/*Initiate Rect*/
serie.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("x", function(d) { return x(d.data.lieu); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth());


});

但是，我不明白 y(d[0]) 或 y(d[0])-y(d[1])的确切含义> 当我想生成矩形的 y 位置和高度时。

确实，我有以下问题：

错误：属性 y：预期长度，“NaN”。

错误：属性高度：预期长度，“NaN”。

我想知道 y 的意思；我们需要为每个“lieu”关联矩形，但是 d[0] 呢？它应该表示我的数据的第一列？

这是我的代码：https://plnkr.co/edit/mrvWiYzKpWi6qvIteWOF?p=preview

Answer 1

问题在于移动到不同的列键。

d3.csv("data.csv", function(d){
    return{
        lieu: d.lieu_de_residence,
        cat1: +d.pub_pub,
        cat2: +d.pub_priv,
        cat3: +d.priv_pub,
        cat4: +d.priv_priv
    };
}).then(function(data){

我们使用旧的列名

const z = d3.scaleOrdinal()
    .range(["#e2e8a0","#33b0e6","#e73b26","#ece42c"])
    .domain(data.columns.slice(1)); //remove columns you don't need

//.....

const serie = svg.selectAll(".serie")
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
    .attr("class","serie")
    .attr("fill",d=>z(d.key));

读取数据后将columns数组更新为新值

console.log(data);
data.columns = [data.columns[0], 'cat1', 'cat2', 'cat3', 'cat4'];
/*Initiate x Axis*/