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


});

但是，當我想生成rect的y位置和高度時，我並不清楚y（d [0]）或y（d [0]）-y（d [1]）的含義。

確實，我有以下問題：

錯誤：屬性y：預期長度“ NaN”。

錯誤：屬性高度：預期長度“ NaN”。

我想知道y的含義； 我們需要為每個“環境”關聯矩形，但是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*/