Question

我的csv数据包含一年的列，然后是年龄组的列，其中包含以下费率：

year,15-19,20-24,25-29,...
1999,0,1.3,8.1,...
2000,0,1.3,8.3,...
.
.

我已经映射了数据，如下所示。映射后，数据采用以下形式：

>Array[Object, Object, ...]

每个对象的格式为：

 >id:"age group"
     values:Array[]
           >Object
               >rate: ""
               >year: ""

我遇到了y.domain的最大值问题。它似乎从我的第四个物体拉出最大值并停在那里。任何帮助找出最大呼叫的错误都将受到赞赏。

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// define scales
var x = d3.scaleLinear().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    //define color scale
    z = d3.scaleOrdinal(d3.schemeCategory10);

//define line generator
var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.rate); });

//load data
d3.csv("breaseByageSpread.csv", function(error, data) { 
    if(error) throw error;

        var ages = data.columns.slice(1).map(function(id) {
        return {
            id: id,
            values: data.map(function(d) {
                return {year: d.year, rate: d[id]};
                })
            };
        });


        //define x axis
        x.domain(d3.extent(data, function(d) { return d.year; }));

        //define y axis
        y.domain([
            d3.min(ages, function(c) { return d3.min(c.values, function(d) { return d.rate; }); }),
            d3.max(ages, function(c) { return d3.max(c.values, function(d) { return d.rate; }); })
        ]);


        // define color scale
        z.domain(ages.map(function(c) { return c.id; }));

        //append x axis
        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x)
            .ticks(15)
            .tickFormat(d3.format('d')));

        //append y axis
        g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y))
            .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -50)
                .attr('x', -125)
                .attr("dy", "0.71em")
                .attr("fill", "#000")
                .text("Rate per 100,000 ppl");

        //append rate data to svg
        var rate = g.selectAll(".rate")
            .data(ages)
            .enter().append("g")
                .attr("class", "age");

        //append rate path to svg
        rate.append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return z(d.id); });

          rate.append("text")
              .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
              .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.rate) + ")"; })
              .attr("x", 3)
              .attr("dy", "0.35em")
              .style("font", "10px sans-serif")
              .text(function(d) { return d.id; });


        function type(d, _, columns) {
          //d.date = parseTime(d.date);
          for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
          return d;

        };
    });

Answer 1

我发现了问题。费率数据以字符串形式出现。要将其转换为数字，我在加载数据时更改了以下代码：

旧：

values: data.map(function(d) {
                return {year: d.year, rate: d[id]};

新：

values: data.map(function(d) {
                return {year: d.year, rate: +d[id]};

无法访问嵌套对象数据的最大值以便在D3中的域中使用

1 个答案: