使用csv文件的D3.js多系列折线图

【问题标题】：D3.js multi-series line chart using csv file使用csv文件的D3.js多系列折线图
【发布时间】：2015-11-16 04:28:35
【问题描述】：

我正在尝试像以下示例一样重新创建多折线图：multi-series line chart

这是我的初始数据文件：

module_category,component_category,date_repair,actual,predicted
M1,P06,2009/01,39,63
M1,P06,2009/10,3,4
M1,P06,2009/11,4,3
M1,P06,2009/12,4,2
M1,P06,2009/02,29,45
M1,P06,2009/03,29,32
M1,P06,2009/04,10,22
M1,P06,2009/05,13,15
M1,P06,2009/06,9,16
M1,P06,2009/07,7,12
M1,P06,2009/08,5,9
M1,P06,2009/09,4,5
M1,P09,2009/01,7,5
M1,P09,2009/10,3,1
M1,P09,2009/02,2,3
M1,P09,2009/03,6,2
M1,P09,2009/04,4,2
M1,P09,2009/06,1,2
M1,P09,2009/07,3,2

我想将 x 轴上的日期和 y 轴上的“实际”和“预测”值绘制为两条单独的线，但每个特定日期的特定值的总和。例如，“2009 年 1 月”的“实际”和“预测”修复值的总数。

修改示例中的代码后，我得到了这个：

current displayed chart

大红色球体（如图所示）表示修复值高于特定阈值，这在我的代码中。绘图前生成的最终数据集应如下所示：

date_repair,Actual,Predicted    
01/01/2009,11027,13250
01/02/2009,8862,12592
01/03/2009,12696,12254
01/04/2009,10666,12014
01/05/2009,10732,11776
01/06/2009,11304,16044
01/07/2009,12880,15133
01/08/2009,11582,13481
01/09/2009,9426,8314
01/10/2009,5250,6510
01/11/2009,4075,4941
01/12/2009,2789,3519

然后我考虑使用以键作为日期的嵌套函数，但这不会在页面上显示任何内容。 

function datelineChart(){
   var margin = {top: 20, right: 90, bottom: 30, left: 60},
       width = 980 - margin.left - margin.right,
       height = 500 - margin.top - margin.bottom;

   var parseDate = d3.time.format("%Y/%m").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")
       .tickFormat(d3.format(".2s"));

   var line = d3.svg.line()
       .interpolate("basis")
       .x(function(d) { return x(d.date); })
       .y(function(d) { return y(d.no_repairs); });

   var svg = d3.select("#maincontent").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("data/Consolidated_result.csv", function(error, data) {
       if (error) throw error;
     
       data = d3.nest()
        .key(function(d) { return d.date_repair;}).sortKeys(d3.ascending)
        .rollup(function(values){
          var counts = {}, keys = ['actual', 'predicted']
          keys.forEach(function(key){
              counts[key] = d3.sum(values, function(d){ return d[key]})
          })
        return counts
        })
      .entries(data);

      data.forEach(function(d){
        d.date = parseDate(d.key);
      })

      var repairs = data.map(function(d) {
        return { date: d.date, no_repairs: d.values};
      });

      console.log(repairs)


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

      y.domain([
        d3.min(repairs, function(c) { return d3.min(c.no_repairs); }),
        d3.max(repairs, function(c) { return d3.max(c.no_repairs); })
      ]);

      var module = svg.selectAll(".module")
        .data(repairs)
      .enter().append("g")
        .attr("class", "module"); 


      var path = svg.selectAll(".module").append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.no_repairs); })
        .style("stroke", function(d) { return color(d.date); });


      var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];

      console.log(totalLength);

      d3.select(path[0][0])
        .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0])
        .attr("stroke-dashoffset", totalLength[0])
        .transition() // Call Transition Method
            .duration(10000) // Set Duration timing (ms)
            .ease("linear") // Set Easing option
            .attr("stroke-dashoffset", 0)// Set final value of dash-offset for transition
            .each("end", function(){
                labels.transition()
                    .delay(function(d, i){ return i * 1000; })
                    .style("opacity",1);
            });


      d3.select(path[0][1])
        .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1])
        .attr("stroke-dashoffset", totalLength[1])
        .transition() // Call Transition Method
            .duration(10000) // Set Duration timing (ms)
            .ease("linear") // Set Easing option
            .attr("stroke-dashoffset", 0);// Set final value of dash-offset for transition
            .each("end", function(){
                labels.transition()
                    .delay(function(d, i){ return i * 1000; })
                    .style("opacity",1);

            }); 


      var point = module.append("g")
          .attr("class", "line-point");

          point.selectAll('circle')
                .data(function(d){ return d.values})
            .enter().append("circle")
                .attr("cx", function(d, i) { return x(d.date)})
                .attr("cy", function(d, i) { return y(d.value)})
                .attr("r", 5)
                .style("fill", "white")
                .style("stroke", function(d) { 
                    if(d.value < 14000){
                        return color(this.parentNode.__data__.name);
                        }else{
                            return d3.select(this).attr("r",15).style("fill","red").style("stroke","red");
                        } 
                });
      var labels = module.append("text")
          .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
          .attr("class","label")
          .attr("transform", function(d) { return "translate(" + x(d.key) + "," + y(d.values) + ")"; })
          .attr("x", 3)
          .attr("dy", ".35em")
          .style("opacity", 0)
          .text(function(d) { return d.name; });

同样使用在控制台中查看“路径”的值会显示一个空数组。请帮忙。

【问题讨论】：

    标签： javascript d3.js charts


    【解决方案1】：

    只需在绘制图表之前对数据进行排序。 

    data.sort(function(a, b) {
  return a.date - b.date
});


    var margin = {
    top: 20,
    right: 90,
    bottom: 30,
    left: 60
  },
  width = 980 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y/%m").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")
  .tickFormat(d3.format(".2s"));

var line = d3.svg.line()
  .interpolate("basis")
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.no_repairs);
  });

var svg = d3.select("#maincontent").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 = [{
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/01",
  "actual": 39,
  "predicted": 63
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/10",
  "actual": 3,
  "predicted": 4
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/11",
  "actual": 4,
  "predicted": 3
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/12",
  "actual": 4,
  "predicted": 2
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/02",
  "actual": 29,
  "predicted": 45
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/03",
  "actual": 29,
  "predicted": 32
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/04",
  "actual": 10,
  "predicted": 22
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/05",
  "actual": 13,
  "predicted": 15
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/06",
  "actual": 9,
  "predicted": 16
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/07",
  "actual": 7,
  "predicted": 12
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/08",
  "actual": 5,
  "predicted": 9
}, {
  "module_category": "M1",
  "component_category": "P06",
  "date_repair": "2009/09",
  "actual": 4,
  "predicted": 5
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/01",
  "actual": 7,
  "predicted": 5
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/10",
  "actual": 3,
  "predicted": 1
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/02",
  "actual": 2,
  "predicted": 3
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/03",
  "actual": 6,
  "predicted": 2
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/04",
  "actual": 4,
  "predicted": 2
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/06",
  "actual": 1,
  "predicted": 2
}, {
  "module_category": "M1",
  "component_category": "P09",
  "date_repair": "2009/07",
  "actual": 3,
  "predicted": 2
}];


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

data.forEach(function(d) {
  d.date = parseDate(d.date_repair);
});

data.sort(function(a, b) {
  return a.date - b.date
});
console.log(data);

var repairs = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {
        date: d.date,
        no_repairs: +d[name]
      };
    })
  };
});

console.log(repairs);

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

y.domain([
  d3.min(repairs, function(c) {
    return d3.min(c.values, function(v) {
      return v.no_repairs;
    });
  }),
  d3.max(repairs, function(c) {
    return d3.max(c.values, function(v) {
      return v.no_repairs;
    });
  })
]);
console.log("comment1");

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", 0 - margin.left)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Number of Repairs");
console.log("comment2");

var module = svg.selectAll(".module")
  .data(repairs)
  .enter().append("g")
  .attr("class", "module");

var path = svg.selectAll(".module").append("path")
  .attr("class", "line")
  .attr("d", function(d) {
    return line(d.values);
  })
  .style("stroke", function(d) {
    return color(d.name);
  });

console.log("comment3");
var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];

console.log(totalLength);

d3.select(path[0][0])
  .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0])
  .attr("stroke-dashoffset", totalLength[0])
  .transition() // Call Transition Method
  .duration(10000) // Set Duration timing (ms)
  .ease("linear") // Set Easing option
  .attr("stroke-dashoffset", 0) // Set final value of dash-offset for transition
  .each("end", function() {
    labels.transition()
      .delay(function(d, i) {
        return i * 1000;
      })
      .style("opacity", 1);
  });

console.log("comment4");

d3.select(path[0][1])
  .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1])
  .attr("stroke-dashoffset", totalLength[1])
  .transition() // Call Transition Method
  .duration(10000) // Set Duration timing (ms)
  .ease("linear") // Set Easing option
  .attr("stroke-dashoffset", 0) // Set final value of dash-offset for transition
  .each("end", function() {
    labels.transition()
      .delay(function(d, i) {
        return i * 1000;
      })
      .style("opacity", 1);
  });


var point = module.append("g")
  .attr("class", "line-point");
console.log("comment5");

point.selectAll('circle')
  .data(function(d) {
    return d.values
  })
  .enter().append("circle")
  .attr("cx", function(d, i) {
    return x(d.date)
  })
  .attr("cy", function(d, i) {
    return y(d.no_repairs)
  })
  .attr("r", 5)
  .style("fill", "white")
  .style("stroke", function(d) {
    if (d.no_repairs < 14000) {
      return color(this.parentNode.__data__.name);
    } else {
      return d3.select(this).attr("r", 15).style("fill", "red").style("stroke", "red");
    }
  });

var labels = module.append("text")
  .datum(function(d) {
    return {
      name: d.name,
      value: d.values[d.values.length - 1]
    };
  })
  .attr("class", "label")
  .attr("transform", function(d) {
    return "translate(" + x(d.value.date) + "," + y(d.value.no_repairs) + ")";
  })
  .attr("x", 3)
  .attr("dy", ".35em")
  .style("opacity", 0)
  .text(function(d) {
    return d.name;
  });
    path {
  fill: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="maincontent"></div>

    【讨论】：

    • 不幸的是，我没有得到我想要的输出。该图仍然就像我在图片中发布的一样。绘图前的数据集应如下所示：date_repair,Actual,Predicted 01/01/2009,11027,13250 01/02/2009,8862,12592 01/03/2009,12696,12254 01/04/2009,10666,12014 01/05/2009,10732,11776 这就是为什么我要实现 d3.nest() 函数来根据各自的日期对值进行求和，但我对此没有任何进展。
    猜你喜欢
    • 2022-09-23
    • 1970-01-01
    • 2015-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode