javascript - 如何在 d3.js 的嵌套结构中附加数据路径？

Question

我是 d3.js 的新手。我喜欢代表多线图表。 x 轴是年份，y 轴是每个国家/地区拥有的专利数量。每行都应该代表不同的国家/地区。

我有一个包含以下信息的 csv 文件:

PATENT,GYEAR,GDATE,APPYEAR,COUNTRY
3070801,1963,1096,,"BE"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070802,1963,1096,,"US"
3070803,1964,1096,,"US"
3070804,1964,1096,,"US"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
3070801,1964,1096,,"BE"
...

我使用如下嵌套结构:

 var countries = d3.nest()
                .key(function(d) { return d.COUNTRY; })
                .key(function(d) { return d.GYEAR; })
                .rollup(function(v) {  return { "total": v.length} })
                .map(data);

这个结构通过以下方式给我信息:

BE: Object
    1963: Object
        total: 1
    1964: Object
        total: 6
US: Object
    1963: Object
        total: 4
    1964: Object
        total: 2

我的脚本:

<script>
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y").parse;

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

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

    var color = d3.scale.category10();

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

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

    var line = d3.svg.line()
            .interpolate("basis")
            .x(function(d) {...}) //not so sure how to obtain the x and y
            .y(function(d) {... });

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

    d3.csv("data3", function(error, data) {
        if (error) throw error;

        color.domain(d3.keys(data[0]).filter(function (key) {
            return key !== "GYEAR";
        }));

        data.forEach(function(d) {
            d.GYEAR = parseDate(String(d.GYEAR));
        });


        var countries = d3.nest()
                .key(function(d) { return d.COUNTRY; })
                .key(function(d) { return d.GYEAR; })
                .rollup(function(v) {  return { "total": v.length} })
                .map(data);



        x.domain(d3.extent(data, function (d) {                
            return d.GYEAR;
        }));

        y.domain([0,10]);

        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1.5px'})
                .call(xAxis);

        svg.append("g")
                .attr("class", "y axis")
                .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1.5px'})
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Cantidad");

        var city = svg.selectAll(".country")
                .data(countries)
                .enter().append("g")
                .attr("class", "country");      

        //How to append path?
        city.append("path")
                .attr("class", "line")
                .attr("d", function(d) {...})
                .style("stroke", function(d) {...});


    });
</script>

如何构建我的 var 行？如何附加路径？

提前致谢。

Answer 1

对于生成线函数你可以这样做:

var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) {console.log(x(d.year));return x(d.year)}) // x will be year
        .y(function(d) {console.log(y(d.total));return y(d.total)}); //y will be total

对于 rollup 函数获取所有数据:

var countries = d3.nest()
        .key(function(d) { return d.COUNTRY; })
        .key(function(d) { return d.GYEAR.getFullYear(); })
        .rollup(function(v){ 
          var pat = 0;
          var yr = 0;
          var country = ""
          v.forEach(function(r){
            pat += parseInt(r.PATENT);
            yr = r.GYEAR;
            country = r.COUNTRY
          });
          //store all the info like patent year country 
          return { "total": v.length, patent:pat, year:yr, country: country} 

        })
        .map(data);

对于线的设置值:

var city = svg.selectAll(".country")
                .data([countries.BE, countries.US])//this will genrate 2 lines for the two datset.
                .enter().append("g")
                .attr("class", "country");      

        //How to append path?
        city.append("path")
                .attr("class", "line")
                .attr("d", function(d) {
                  var d_array = []
                  //for all the years make it an array
                  for (key in d) {
                      d_array.push(d[key])
                  }  
                   return line(d_array);

                })
                .style("stroke", function(d) { 
                  var country = "";
                  //the first object will tell the country
                  for (key in d) {
                      country = d[key].country;
                      break;
                  }  
                  return color(country)

                });

编辑

为了将国家/地区置于一般形式:而不是这样做:

.data([countries.BE, countries.US]),

执行此操作以获取数组:

    var country_data = [];
    for (key in countries) {
          country_data.push(countries[key])
    }  

以后做

   .data(country_data), 

工作代码 here

更简洁的代码 here

希望这对您有所帮助!