javascript - 如何将 D3 图表的 JS 数组更改为 JS 对象

Question

最初，当数据是像 [21, 3, 5, 21, 15] 这样的简单数组时，它工作得很好。但是，当我尝试使用对象数组时出现以下错误，我不知道如何修复它。

Error: <rect> attribute y: Expected length, "NaN".

当我在 return yScale(d.Amount); 处停止使用控制台调试器时，我看到它读入了数据但出现了错误。其正上方的返回行 return h - yScale(d.Amount); 没有产生任何错误。

var myData = [{
  'Name': 'User1',
  'Amount': 21
}, {
  'Name': 'User2',
  'Amount': 3
}, {
  'Name': 'User3',
  'Amount': 5
}, {
  'Name': 'User4',
  'Amount': 21
}, {
  'Name': 'User5',
  'Amount': 15
}];
//Width and height
var w = 240;
var h = 250;
var yScale = null;

function draw(initialData) {
  var xScale = d3.scale.ordinal()
    .domain(d3.range(initialData.length))
    .rangeRoundBands([0, w], 0.05);

  yScale = d3.scale.linear()
    .domain([0, d3.max(initialData)])
    .range([0, h]);

  //Create SVG element
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

  var yAxis = d3.svg.axis()
    .scale(yScale);

  svg.selectAll("rect")
    .data(initialData)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return xScale(i);
    })
    .attr("y", function(d) {
      return h - yScale(d.Amount);
    })
    .attr("width", xScale.rangeBand())
    .attr("height", function(d) {
      return yScale(d.Amount);
    })
    .attr("fill", "steelblue");

  svg.selectAll("text")
    .data(initialData)
    .enter()
    .append("text")
    .text(function(d) {
      return d.Amount;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return xScale(i) + xScale.rangeBand() / 2;
    })
    .attr("y", function(d) {
      return h - yScale(d.Amount) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

  var xAxisGroup = svg.append("g")
    .attr("transform", "translate(0," + 248 + ")")
    .style("stroke-width", "1px")
    .call(xAxis);
}

function update(newData) {
  yScale.domain([0, d3.max(newData)]);

  var rects = d3.select("#chart svg")
    .selectAll("rect")
    .data(newData);

  // enter selection
  rects
    .enter().append("rect");

  // update selection
  rects
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d.Amount);
    })
    .attr("height", function(d) {
      return yScale(d.Amount);
    })

  // exit selection
  rects
    .exit().remove();

  var texts = d3.select("#chart svg")
    .selectAll("text")
    .data(newData);

  // enter selection
  texts
    .enter().append("rect");

  // update selection
  texts
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d.Amount) + 14;
    })
    .text(function(d) {
      return d.Amount;
    })

  // exit selection
  texts
    .exit().remove();
}

window.onload = draw(myData);

var newData = [{
  'Name': 'User1',
  'Amount': 11
}, {
  'Name': 'User2',
  'Amount': 13
}, {
  'Name': 'User3',
  'Amount': 5
}, {
  'Name': 'User4',
  'Amount': 7
}, {
  'Name': 'User5',
  'Amount': 5
}];
d3.select("#update").on("click", function() {
  update(newData);
})

Answer 1

问题是 yScale 域。

当你只有一个数组时，你可以将它传递给 d3.max:

yScale.domain([0, d3.max(newData)])

但是，既然您有一个对象数组，您必须定义您希望 d3.max 使用的属性:

.domain([0, d3.max(initialData, function(d){
    return d.Amount
})])

这是您的代码，仅进行了更改:

 var myData = [{
   'Name': 'User1',
   'Amount': 21
 }, {
   'Name': 'User2',
   'Amount': 3
 }, {
   'Name': 'User3',
   'Amount': 5
 }, {
   'Name': 'User4',
   'Amount': 21
 }, {
   'Name': 'User5',
   'Amount': 15
 }];
 //Width and height
 var w = 240;
 var h = 250;
 var yScale = null;

 function draw(initialData) {
   var xScale = d3.scale.ordinal()
     .domain(d3.range(initialData.length))
     .rangeRoundBands([0, w], 0.05);

   yScale = d3.scale.linear()
     .domain([0, d3.max(initialData, function(d){return d.Amount})])
     .range([0, h]);

   //Create SVG element
   var svg = d3.select("body")
     .append("svg")
     .attr("width", w)
     .attr("height", h);

   var xAxis = d3.svg.axis()
     .scale(xScale)
     .orient("bottom")
     .ticks(5);

   var yAxis = d3.svg.axis()
     .scale(yScale);

   svg.selectAll("rect")
     .data(initialData)
     .enter()
     .append("rect")
     .attr("x", function(d, i) {
       return xScale(i);
     })
     .attr("y", function(d) {
       return h - yScale(d.Amount);
     })
     .attr("width", xScale.rangeBand())
     .attr("height", function(d) {
       return yScale(d.Amount);
     })
     .attr("fill", "steelblue");

   svg.selectAll("text")
     .data(initialData)
     .enter()
     .append("text")
     .text(function(d) {
       return d.Amount;
     })
     .attr("text-anchor", "middle")
     .attr("x", function(d, i) {
       return xScale(i) + xScale.rangeBand() / 2;
     })
     .attr("y", function(d) {
       return h - yScale(d.Amount) + 14;
     })
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "white");

   var xAxisGroup = svg.append("g")
     .attr("transform", "translate(0," + 248 + ")")
     .style("stroke-width", "1px")
     .call(xAxis);
 }

 function update(newData) {
   yScale.domain([0, d3.max(newData)]);

   var rects = d3.select("#chart svg")
     .selectAll("rect")
     .data(newData);

   // enter selection
   rects
     .enter().append("rect");

   // update selection
   rects
     .transition()
     .duration(300)
     .attr("y", function(d) {
       return h - yScale(d.Amount);
     })
     .attr("height", function(d) {
       return yScale(d.Amount);
     })

   // exit selection
   rects
     .exit().remove();

   var texts = d3.select("#chart svg")
     .selectAll("text")
     .data(newData);

   // enter selection
   texts
     .enter().append("rect");

   // update selection
   texts
     .transition()
     .duration(300)
     .attr("y", function(d) {
       return h - yScale(d.Amount) + 14;
     })
     .text(function(d) {
       return d.Amount;
     })

   // exit selection
   texts
     .exit().remove();
 }

 window.onload = draw(myData);

 var newData = [{
   'Name': 'User1',
   'Amount': 11
 }, {
   'Name': 'User2',
   'Amount': 13
 }, {
   'Name': 'User3',
   'Amount': 5
 }, {
   'Name': 'User4',
   'Amount': 7
 }, {
   'Name': 'User5',
   'Amount': 5
 }];
 d3.select("#update").on("click", function() {
   update(newData);
 })

<script src="https://d3js.org/d3.v3.min.js"></script>