D3 Столбцы столбцов столбцов переполнены

Question

У меня возникла проблема с использованием d3, чтобы создать гистограмму, где столбец переполняется и метки оси y неверны. Вот скрипка http://jsfiddle.net/fajgvj9v/, которая показывает проблему. Данные анализируют тег <pre id="data">, чтобы имитировать CSV, который я использую. Если вы измените значение «a» на 5000 из 4000, оно будет выглядеть так, как ожидалось.

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

Answer 1

Максимальная функция должна преобразовать в число с помощью +

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

должен быть

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