D3 条形图列溢出

D3 Bar Chart Columns Overflowing

本文关键字：溢出 条形图 D3      更新时间：2023-09-26

我在使用 d3 创建柱状图时遇到问题，其中列溢出并且 y 轴标签不正确。这是一个显示问题的小提琴 http://jsfiddle.net/fajgvj9v/。数据正在解析<pre id="data">标记以模拟我正在使用的 CSV。如果将"a"的值从 4000 更改为 5000，它将按预期呈现。

<pre id="data">
name,count
a, 4000
b, 500
</pre>
yTitle = "Items";
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
var y = d3.scale.linear()
  .rangeRound([height, 0]);
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(d3.format(".2s"));
var svg = d3.select("#malware_by_os").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 + ")");
var data = d3.csv.parse( d3.select("pre#data").text() );
console.log(data);
  var xLbl = d3.keys(data[0])[0];
  var yLbl = d3.keys(data[0])[1];
  data.sort(function(a, b) {
    return b[yLbl] - a[yLbl];
  });
  x.domain(data.map(function(d) {
    return d[xLbl];
  }));
  y.domain([0, d3.max(data, function(d) {
    return d[yLbl];
  })]);
  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)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(yTitle);
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d[xLbl]);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d[yLbl]);
    })
    .attr("height", function(d) {
      return height - y(d[yLbl]);
    });

max 函数需要使用 + 转换为数字 

  y.domain([0, d3.max(data, function(d) {
    return d[yLbl];
  })]);

应该是

  y.domain([0, d3.max(data, function(d) {
    return +d[yLbl];
  })]);
相关文章：