比例返回负值

Question

我的d3条形图有问题。 我的阵列：

var data = [
{"letter":"59","title":"12-18"},
{"letter":"7","title":"18-21"},
{"letter":"5","title":"21-24"},
{"letter":"5","title":"24-27"}]

返回：

59 - -594
7 - 0
5 - 23
5 - 23

https://jsfiddle.net/osw0uhuf/7/

Answer 1

现在，您的d.letter值为字符串。

所以，给定d.letter ...

的值

["59", "7", "5", "5"]

...当您尝试使用以下方法计算最大值时：

d3.max(data, function (d){ return d.letter;})

猜猜你得到的最大值是多少？你会说"59"吗？不，这是"7"！自己看：

＆＃13;

＆＃13;

console.log(d3.max(["59", "7", "5", "5"]))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这只是你的一个问题：你不能像这样使用线性音阶。

因此，将它们转换为数字是一个好主意：

data.forEach(function(d) {
    d.letter = +d.letter
})

这是您更新的代码：

＆＃13;

＆＃13;

var barCharts = function(item, data, check) {

  data.forEach(function(d) {
    d.letter = +d.letter
  })

  if (check) {
    item.innerHTML = '';
  }
  var scale = $(item).outerHeight(),
    svg = d3.select(item),
    width = scale * 1.36,
    height = scale;
  var x = d3.scaleBand().rangeRound([0, width]).padding(0.4),
    y = d3.scaleLinear().rangeRound([height, 0]);
  var color = ["#3393d2", "#2d77c4", "#104990", "#212874", "#501b68", "#872c71", "#aa3b46", "#ab3945", "#3393d2", "#2d77c4", "#104990", "#212874", "#501b68", "#872c71", "#aa3b46", "#ab3945"];
  x.domain(data.map(function(d) {
    return d.title;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.letter;
  })]);

  svg.append("g")
    .attr('transform', "translate(-4,0)")
    .selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("rx", "10")
    .attr("ry", "2")
    .attr("x", function(d) {
      return x(d.title);
    })
    .attr("y", '0')
    .attr("width", x.bandwidth())
    .attr("height", height)
    .attr('fill', '#d9e4eb')
    .attr("data-tooltip", function(d) {
      return d.letter + '% ' + d.title;
    });
  svg.append("g")
    .attr('transform', "translate(-4,0)")
    .selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("rx", "10")
    .attr("ry", "2")
    .attr("x", function(d) {
      return x(d.title);
    })
    .attr("y", function(d) {
      return y(d.letter);
    })
    .attr("width", x.bandwidth())
    .attr("height", function(d) {
      return height - y(d.letter);
    })
    .attr('fill', function(d, i) {
      return color[i];
    })
    .attr("data-tooltip", function(d) {
      return d.letter + '% ' + d.title;
    });
}

var dataset = [{
  "letter": "59",
  "title": "12-18"
}, {
  "letter": "7",
  "title": "18-21"
}, {
  "letter": "5",
  "title": "21-24"
}, {
  "letter": "5",
  "title": "24-27"
}];

barCharts('.graph_age', dataset);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg class="graph_age" style="height: 80px; width: 250px;"></svg>

＆＃13;

＆＃13;

＆＃13;