使用 d3 的條形圖

Question

我有我的 d3 代碼，它在控制台中沒有顯示錯誤，但它也沒有顯示我的條形圖。 由於我沒有收到任何錯誤並且它正在讀取我的數據，因此我對我出錯的地方有點迷茫。 任何指導將不勝感激。

async function drawBars() {
//setting the margin of svg
const margin = {top: 50, right: 50, bottom: 50, left: 50};

//set the width and heigh using the current width and height of the div
const width = 600 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;

//create svg and append to visualisation div
const svg = d3.select("#visualisation").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//set the ranges for the scales
const x = d3.scaleBand()
.range([0, width]);

const y = d3.scaleLinear()
.range([height, 0]);

const data = await d3.csv("./../remote_work.csv")
console.log(data);

//scale the range of the data in the domains
x.domain(data.map(function(d) {
return d.Benefits; 
}));
y.domain([0, d3.max(data, function(d) {
return d.Percentage;
})]);

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
    return x(d.Benefits);
})
.attr("width", x.bandwidth())
.attr("y", function(d) { 
    return y(d.Percentage);
})
.attr("height", function(d) {
    return height - y(d.Percentage);
});

//add the axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

svg.append("g")
.call(d3.axisLeft(y));

}
drawBars()

Answer 1

您需要使用Number(d.Percentage)或+d.Percentage將d.Percentage轉換為數字。

這是因為 CSV 文件閱讀器不知道它的任何部分是否是數字，是否是恰好完全由數字組成的字符串，或者這是否是唯一一個也是數字的值，並且另一行中的同一列實際上是一個字符串。

這就是為什么它不冒任何風險，只是將所有內容都視為字符串。 這意味着您需要確保數據的類型正確。

我會通過將您的代碼更改為以下內容來做到這一點：

const data = (await d3.csv(...).then(
  rows => rows.map(d => ({
    Benefits: d.Benefits,
    Percentage: Number(d.Percentage)
  })));

---

我的工作片段與生成的數據：

 const data = ["Lease car", "401(k)", "Flexible hours"] .map(v => ({ Benefits: v, Percentage: Math.random().toString() })) .map(d => ({ Benefits: d.Benefits, Percentage: Number(d.Percentage) })); function drawBars() { //setting the margin of svg const margin = { top: 50, right: 50, bottom: 50, left: 50 }; //set the width and heigh using the current width and height of the div const width = 600 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; //create svg and append to visualisation div const svg = d3.select("#visualisation").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //set the ranges for the scales const x = d3.scaleBand() .range([0, width]); const y = d3.scaleLinear() .range([height, 0]); //scale the range of the data in the domains x.domain(data.map(function(d) { return d.Benefits; })); y.domain([0, d3.max(data, function(d) { return d.Percentage; })]); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.Benefits); }) .attr("width", x.bandwidth()) .attr("y", function(d) { return y(d.Percentage); }) .attr("height", function(d) { return height - y(d.Percentage); }); //add the axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); } drawBars()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="visualisation"></div>