Javascript 图表未显示在D3中 我在哪里

处理一项任务时，我更改了一个数据变量var csvData，但现在只有一个图表显示在D3中。之前，这四个和一个传奇人物都出现了

scripts.js（已更新食品价格数据，但仍未显示）

$（函数（）{
$（“#占位符”）.remove（）；
var margin={顶部：60，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//X是水平轴
var x0=d3.scale.ordinal（）//对于非定量量表，如名称、类别，使用序数
.rangeRoundBands（[0，宽度]，.1）；//每个条的宽度？
var x1=d3.scale.ordinal（）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
//这些是颜色
var color=d3.scale.ordinal（）
//.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
.范围（[“001F4C”、“003D99”、“005CE6”、“0066FF”、“3385FF”、“80B2FF”、“CCE0FF”、“E6F0FF”、“E6EBFA”）；
var xAxis=d3.svg.axis（）
.比例（x0）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（“left”）//Y轴所在的位置，您希望它位于左侧
//.tick格式（d3格式（“.1s”）；
.滴答声（8）
.tick值（[0,1,2,3,4,5,6]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//条形图数据
变量csvData=[
{“商店”：“合作社”，“西兰花”：2.69，“花椰菜”：3.69，“芹菜”：1.89，“草莓”：4.49，“橙子”：1.69，“西红柿”：3.49，“柠檬”：0.99，“生菜”：0.01，“黄瓜”：2}，
{“商店”：“Safeway”，“西兰花”：2.97，“花椰菜”：3.98，“芹菜”：1.77，“草莓”：5.96，“橙子”：0.97，“西红柿”：2.97，“柠檬”：0.77，“莴苣”：4.97，“黄瓜”：1.97}，
{“商店”：“Sobeys”，“花椰菜”：3.49，“菜花”：3.99，“芹菜”：1.29，“草莓”：3.99，“橙子”：1.99，“西红柿”：4.99，“柠檬”：1.29，“莴苣”：3.49，“黄瓜”：1.99}，
{“商店”：“超市”，“花椰菜”：2.69，“花椰菜”：2.49，“芹菜”：1.09，“草莓”：2.99，“橙子”：0.99，“西红柿”：3.99，“柠檬”：0.99，“生菜”：4.99，“黄瓜”：2.49}，
];
//食品价格
//变量csvData=[
//{“商店”：“索比”，“西兰花”：2.69，“花椰菜”：3.69，“芹菜”：1.89美元，“草莓”：4.49美元，“橙子”：1.69美元，“西红柿”：3.49美元，“柠檬”：0.99美元，“莴苣”：0.00美元，“黄瓜”：2.00}，
//{“商店”：“超市”，“花椰菜”：2.97，“花椰菜”：3.98，“芹菜”：1.77，“草莓”：5.96，“橙子”：0.97，“西红柿”：2.97，“柠檬”：0.77，“生菜”：4.97，“黄瓜”：1.97}，
//{“商店”：“Safeway”，“西兰花”：3.49，“花椰菜”：3.99，“芹菜”：1.29，“草莓”：3.99，“橙子”：1.99，“西红柿”：4.99，“柠檬”：1.29，“莴苣”：3.49，“黄瓜”：1.99}，
//{“商店”：“鸡舍”、“花椰菜”：“2.69”、“花椰菜”：“2.49”、“芹菜”：“1.09”、“草莓”：“2.99”、“橙子”：“0.99”、“西红柿”：“3.99”、“柠檬”：“0.99”、“莴苣”：“4.99”、“黄瓜”：“2.49”}
// ];
//AgeNames=食品名称
//州=商店
var数据=csvData；
//var ageNames=d3.keys（数据[0]）.filter（函数（键）{return key！==“State”}）；
var foodNames=d3.keys（数据[0]）.filter（函数（键）{return key！==“Store”}）；
data.forEach（函数（d）{
d、 ages=foodNames.map（函数（名称）{return{name:name，value:+d[name]}；}）；
});
域（data.map（函数（d）{returnd.Store；}））；
x1.domain（foodNames）.rangeRoundBands（[0，x0.rangeBand（）]）；
y、 域（[0，d3.max（数据，函数（d）{返回d3.max（d.ages，函数（d）{返回d.value；}；}）]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）//在Y轴上旋转标签
.attr（“y”，8）//与y轴的标签间距
.attr（“dy”，“.71em”）//与Y轴的标签间距
.style（“文本锚定”、“结束”）//将标签锚定到Y轴的末端
.text（“价格（美元）”；//更改Y轴或纵轴上的文本
var store=svg.selectAll（“.store”）//选择标记为store的列中的所有数据
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+
x0（d.Store）
+ ",0)"; });
store.selectAll（“rect”）
.data（函数（d）{返回d.age；}）
.enter（）.append（“rect”）
.attr（“类”、“棒”）
.attr（“宽度”，x1.rangeBand（））
.attr（“x”，函数（d）{返回x1（d.name）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
var legend=svg.selectAll（“.legend”）
.数据(
foodNames.slice（）.reverse（）
)
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d，i）{return“translate（0，+i*22.5+”）；}）；
//数字（20）决定图例中项目之间的间距
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d；}）；
})；

使用相同的脚本文件和相同的数据，其他人会被问到一个问题。你们是来自同一家公司还是……？？但我如何解决问题和解决方案都提供了。@saikiran.vsk看起来我们正在处理同一个问题，查看了你们的解决方案，但仍然遇到了相同的问题图表，没有显示在新的“食品价格”数据，我想这可能是图表问题的另一个规模。我有两个轴，但图表和图例还没有显示出来。我们可以通过聊天来解决这个问题吗？我还更新了问题顶部的

scripts.js

$(function() {
  $("#placeholder").remove();
  var margin = {top: 60, right: 20, bottom: 30, left: 40},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

  // X is the horizontal axis
  var x0 = d3.scale.ordinal() // ordinal for non quantitative scales, like names, categories
  .rangeRoundBands([0, width], .1); // Width of each individual bar?

  var x1 = d3.scale.ordinal();

  var y = d3.scale.linear()
  .range([height, 0]);

  // Bar chart colors
  var color = d3.scale.ordinal()
  .range(["#001F4C", "#003D99", "#005CE6", "#0066FF", "#3385FF", "#80B2FF", "#CCE0FF", "#E6F0FF", "#E6EBFA"]);

  var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

  var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left") // Where the Y axis goes, you'll want it on the left
  .ticks(8)
  .tickValues([0, 1, 2, 3, 4, 5, 6]);

  var svg = d3.select("body").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 + ")");

  // Bar chart data
  var csvData = [
  {"Store":"Co-op","Broccoli":2.69,"Cauliflower":3.69,"Celery":1.89,"Strawberries":4.49,"Oranges":1.69,"Tomatoes":3.49,"Lemons":0.99, "Lettuce":3.99, "Cucumber":2},
  {"Store":"Safeway","Broccoli":2.97,"Cauliflower":3.98,"Celery":1.77,"Strawberries":5.96,"Oranges":0.97,"Tomatoes":2.97,"Lemons":0.77, "Lettuce":4.97, "Cucumber":1.97},
  {"Store":"Sobeys","Broccoli":3.49,"Cauliflower":3.99,"Celery":1.29,"Strawberries":3.99,"Oranges":1.99,"Tomatoes":4.99,"Lemons":1.29, "Lettuce":3.49, "Cucumber":1.99},
  {"Store":"Superstore","Broccoli":2.69,"Cauliflower":2.49,"Celery":1.09,"Strawberries":2.99,"Oranges":0.99,"Tomatoes":3.99,"Lemons":0.99, "Lettuce":4.99, "Cucumber":2.49},
  ];

  var data = csvData;
  var foodNames = d3.keys(data[0]).filter(function(key) { return key !== "Store"; });

  data.forEach(function(d) {
    d.food = foodNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.Store; }));
  x1.domain(foodNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.food, function(d) { return d.value; }); })]);

  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)") // Rotates the label on the Y axis
  .attr("y", 8) // Label spacing from Y axis
  .attr("dy", ".71em") // Label spacing from Y axis
  .style("text-anchor", "end") // Anchor the label to the end of the Y axis
  .text("Price (in dollars)"); // Changes the text on the Y or vertical axis

  var store = svg.selectAll(".store") // Selects all of the data in column labelled store
  .data(data)
  .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.Store) + ",0)"; });

  store.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("class", "stick")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
  .data(foodNames.slice().reverse())
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 22.5 + ")"; }); // Determines spacing between items in legend

  legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });
});