javascript - 图表未显示在 D3 中

Question

我在哪里

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

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

Answer 1

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

// These are the colors
  var color = d3.scale.ordinal()
  // .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  .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
  // .tickFormat(d3.format(".1s"));
  .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":0.01, "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},
  ];

  // Food Prices
  // var csvData = [
  // {"Store":"Sobey","Broccoli":2.69,"Cauliflower":3.69,"Celery":$1.89,"Strawberries":$4.49,"Oranges":"1.69,"Tomatoes":$3.49,"Lemons":$0.99,"Lettuce":$0.00,"Cucumber":2.00},
  // {"Store":"Superstore","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":"Safeway","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":"Coop","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"}
  // ];

  // AgeNames = FoodNames
  // States = Stores

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

  data.forEach(function(d) {
    d.ages = 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.ages, 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 + ")"; });
  // Number (20) 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; });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我们在两个领域看到了两个错误， 那些是 1)transform属性值设置 x0(d.store) store 未定义，它必须是 x0(d.Store)

和 2)ageNames 根本没有在

中声明、注释和使用

var legend = svg.selectAll(".legend")
  .data(ageNames.slice().reverse() )

更改为

var legend = svg.selectAll(".legend")
  .data( foodNames.slice().reverse() )

希望你能做到，否则 询问更多...