使用 d3 的条形图

Question

I've got my d3 code and it's displaying no errors in the console but it's also not showing my bar chart. I'm a bit lost as to where I'm going wrong since I'm not getting any errors and it is reading in my data. Any guidance would be appreciated.

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

You need to cast the d.Percentage to a number using either Number(d.Percentage) or +d.Percentage .

This is because the CSV file reader doesn't know whether any part of it is a number, whether it is a string that just happens to be made up completely of numbers, or whether this is the only value that is also a number, and the same column in another row is actually a string.

That is why it doesn't take any chances and just treats everything as a string. This means that it's up to you to make sure the data is of the right type.

I'd do this by changing your code to something like this:

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

---

My working snippet with generated data:

 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>