d3.js图线大于范围

Question

我正在使用带有以下代码的d3.js折线图：

var data = [{"age":"3","compositions":"1"},{"age":"5","compositions":"6"},{"age":"6","compositions":"5"},{"age":"7","compositions":"4"},{"age":"8","compositions":"9"},{"age":"9","compositions":"7"},{"age":"10","compositions":"16"},{"age":"11","compositions":"11"},{"age":"12","compositions":"11"},{"age":"13","compositions":"12"},{"age":"14","compositions":"19"},{"age":"15","compositions":"15"},{"age":"16","compositions":"30"},{"age":"17","compositions":"29"},{"age":"18","compositions":"21"},{"age":"19","compositions":"22"},{"age":"20","compositions":"29"},{"age":"21","compositions":"24"},{"age":"22","compositions":"28"},{"age":"23","compositions":"19"},{"age":"24","compositions":"13"},{"age":"25","compositions":"25"},{"age":"26","compositions":"36"},{"age":"27","compositions":"29"},{"age":"28","compositions":"23"},{"age":"29","compositions":"26"},{"age":"30","compositions":"24"},{"age":"31","compositions":"30"},{"age":"32","compositions":"33"},{"age":"33","compositions":"20"},{"age":"34","compositions":"9"},{"age":"35","compositions":"30"}]

        var margin = {
            top : 70,
            right : 20,
            bottom : 50,
            left : 50
        }, width = 460, height = 230;

        var x = d3.scale.linear().range([0, width ]);

        var y = d3.scale.linear().range([ height, 0 ]);

        var xAxis = d3.svg.axis().scale(x).orient("bottom");

        var yAxis = d3.svg.axis().scale(y).orient("left");

        var line = d3.svg.line().x(function(d) {
            return x(d.age);
        }).y(function(d) {
            return y(d.compositions);
        });

        var svg = d3
                .select(".linechartAgePublicationsComposer")
                .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 + ")");

        data.forEach(function(d) {
            d.age = d.age;
            d.compositions = +d.compositions;
        });

        x.domain(d3.extent(data, function(d) {
            return d.age;
        }));
        y.domain(d3.extent(data, function(d) {
            return d.compositions;
        }));

        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(
                        "Compositions");

        svg.append("path").datum(data).attr("class", "line")
                .attr("d", line);

当我执行它时，线条超出设定范围，如图中所示，y轴的方向错误。 为什么线不在范围内并且仅从9到10？

Answer 1

您应该将age属性转换为数字，就像使用composition属性一样：

data.forEach(function(d) {
    d.age = +d.age;
    d.compositions = +d.compositions;
});

Answer 2

d3.extent将使用自然顺序返回给定数组中的最小值和最大值。在您的情况下，您不会将字符串转换为数字，因此显然最低字符串为"10"，最高字符串为"9"。因此，要解决范围问题，只需将年龄转换为数字，如下例所示。我建议使用parseInt

x.domain(d3.extent(data, function(d) {
    return parseInt(d.age, 10);
}));