D3.js报错TypeError: data.map is not a function问题求助

Hey there! Let's break down why you're hitting this error and fix your bar chart step by step.

报错原因 #

First off, that map is not a function error comes from a mismatch between what you expect your data variable to be, and what it actually is after D3 parses your JSON. Let's look at your JSON structure:

[{ "data": [{ "time": "11:30:00", "value": 121863 }, ...] }]

When D3 reads this file, the data parameter in your callback is an array with one single object—that object's data property is where your actual time/value data lives. You're trying to run map() on this outer array, but even if you did, you'd be mapping over that single wrapper object instead of your 4 data points.

On top of that, your code references properties that don't exist in your JSON (d.receive_date and d.responses)—these need to match the keys you actually have: time and value.

解决方法 #

1. 取出正确的数据集 #

Inside your d3.json callback, first extract the real data array from the parsed JSON:

d3.json("coucou.json", function (error, data) {
  // Grab the actual dataset from the outer wrapper object
  const dataset = data[0].data;

  // Use `dataset` instead of `data` for all data operations from here on
  x.domain(dataset.map(function (d) { return d.time }));
  y.domain([0, d3.max(dataset, function (d) { return d.value })]);
  // ... rest of your code
});

2. 修正属性名匹配 #

Update all references in your code to match the keys in your JSON:

• Replace d.receive_date with d.time (in the bar's transform attribute)
• Replace d.responses with d.value (in the rect's y/height values and text label)

3. 绑定x轴比例尺 #

You created an xAxis but forgot to attach your x scale to it—this will make your x axis not render correctly. Fix it either when creating the axis or when calling it:

// Option 1: Set scale when creating the axis
var xAxis = d3.axisBottom(x);

// Option 2: Set scale when calling the axis
chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(" + margin.left + "," + height + ")")
  .call(xAxis.scale(x));

额外提示：D3版本兼容性 #

If you're using D3 v4 or newer, rangeBand() is deprecated—use bandwidth() instead for your bar width calculations (I've included this in the full code below).

修正后的完整代码片段 #

Here's your code with all fixes applied:

// Assume margin, width, height are defined above this code
// Scale to ordinal because x axis is not numerical 
var x = d3.scaleBand().rangeRound([0, width]); 
// Scale to numerical value by height 
var y = d3.scaleLinear().range([height, 0]); 

var chart = d3.select("#chart") 
  .append("svg") // Append svg element inside #chart 
  .attr("width", width + (2 * margin.left) + margin.right) // Set width 
  .attr("height", height + margin.top + margin.bottom); // Set height 

var xAxis = d3.axisBottom(x); // Orient bottom because x-axis will appear below the bars 
var yAxis = d3.axisLeft(y);

d3.json("coucou.json", function (error, data) { 
  const dataset = data[0].data;
  
  x.domain(dataset.map(function (d) { return d.time })); 
  y.domain([0, d3.max(dataset, function (d) { return d.value })]); 

  var bar = chart.selectAll("g") 
    .data(dataset) 
    .enter() 
    .append("g") 
    .attr("transform", function (d, i) { return "translate(" + x(d.time) + ", 0)"; }); 

  bar.append("rect") 
    .attr("y", function (d) { return y(d.value); }) 
    .attr("x", function (d, i) { return x.bandwidth() + (margin.left / 2); }) 
    .attr("height", function (d) { return height - y(d.value); }) 
    .attr("width", x.bandwidth()); // Set width based on ordinal scale range 

  bar.append("text") 
    .attr("x", x.bandwidth() + margin.left) 
    .attr("y", function (d) { return y(d.value) - 10; }) 
    .attr("dy", ".75em") 
    .text(function (d) { return d.value; }); 

  chart.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(" + margin.left + "," + height + ")") 
    .call(xAxis); 

  chart.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + margin.left + ",0)") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("responses"); 
}); 

内容的提问来源于stack exchange，提问作者MissKnacki