在D3.js中设置x轴上的参考线

Setting up reference lines on the x axis in D3.js

本文关键字:参考 D3 js 设置      更新时间:2023-09-26

我已经尝试了几天,但没有找到解决方案。我有一个时间序列数据,每5分钟一次,可以延长几天。我是D3和Java脚本的新手。我花了一些时间来构建它。以下是我一直在做的jsfiddle的链接:

https://jsfiddle.net/adityap16/d61gtadm/2/

代码:

var data = [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
          d.mytime = parseDate(d.mytime);
        });
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 },
height = 200,
width = 800;
var color =  "green";
var xaxis_param = "mytime";
var yaxis_param = "value"
var params1 =  {margin:margin,height:height,width:width, color: color, xaxis_param:xaxis_param, yaxis_param :yaxis_param};
draw_graph(data,params1);


function  draw_graph(data,params){

    //Get the margin 
    var xaxis_param = params.xaxis_param;
    var yaxis_param = params.yaxis_param;
    var color_code = params.color;
    var margin = params.margin;
    var height = params.height - margin.top - margin.bottom,
        width = params.width - margin.left - margin.right;
    console.log("1")
    var x_extent = d3.extent(data, function(d){
        return d[xaxis_param]});
    console.log("2")
    var y_extent = d3.extent(data, function(d){
        return d[yaxis_param]});
    var x_scale = d3.time.scale()
        .domain(x_extent)
        .range([0,width]);
    console.log("3")
    var y_scale = d3.scale.linear()
        .domain([0,y_extent[1]])
        .range([height,0]);

    //Line
    var lineGen = d3.svg.line()
        .x(function (d) {
            return x_scale(d[xaxis_param]);
        })
        .y(function (d) {
            return y_scale(d[yaxis_param]);
        });
    var myChart = d3.select('body').append('svg')
                    .style('background', '#E7E0CB')
                    .attr('width', width + margin.left + margin.right)
                    .attr('height', height + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate('+ margin.left +', '+ margin.top +')');
            myChart
                    .append('svg:path')
                    .datum(data)
                    .attr('class', 'line')
                    .attr("d",lineGen)
                    .attr('stroke', color_code)
                    .attr('stroke-width', 1)
                    .attr('fill', 'none');

    var legend = myChart.append("g")
          .attr("class", "legend")
          .attr("transform", "translate(" + 5 + "," + (height - 25) + ")")
        legend.append("rect")
          .style("fill", color_code)
          .attr("width", 20)
          .attr("height", 20);
        legend.append("text")
          .text(yaxis_param)
          .attr("x", 25)
          .attr("y", 12);
    var vGuideScale = d3.scale.linear()
        .domain([0,y_extent[1]])
        .range([height, 0])
    var vAxis = d3.svg.axis()
        .scale(vGuideScale)
        .orient('left')
        .ticks(5)

    var hAxis = d3.svg.axis()
        .scale(x_scale)
        .orient('bottom')
        .ticks(d3.time.minute, 5);
  myChart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(hAxis);
  myChart.append("g")
      .attr("class", "y axis")
      .call(vAxis)

}

我目前遇到两个问题。

a.)我必须为每天的结束放置垂直标记。如何放置竖线来显示这些从一天到另一天的转换(标记)(只需一条简单的黑色竖线即可)?

b.)我们能处理缺失的数据吗?假设我一天都没有得到数据,我能得到这段时间的空白,然后直接绘制第二天的数据吗。(这个没那么重要)?

这是一个正在工作的jsfiddle:https://jsfiddle.net/kmandov/d61gtadm/3/

这就是你如何实现想要的结果:

问题a.)每天的垂直刻度:

首先,创建一个新的主轴,并将tickSize设置为-height,这样蜱虫就会一直穿过你的图表:

var majorAxis = d3.svg.axis()
  .scale(x_scale)
  .orient('bottom')      
  .ticks(d3.time.day, 1)
  .tickSize(-height);    

然后创建相应的svg元素:

  myChart.append("g")
      .attr("class", "x axis major")
      .attr("transform", "translate(0," + height + ")")
      .call(majorAxis);  

然后删除主要记号的标签(您不希望它们重叠):

.axis.major text {
  display: none;
}

以下是M.Bostock自己的一个很好的例子:http://bl.ocks.org/mbostock/4349486


问题B.)缺少数据

在线上设置.defined():

var lineGen = d3.svg.line()
    .defined(function(d) { return d[yaxis_param]; })    
    .x(function (d) {
        return x_scale(d[xaxis_param]);
    })
    .y(function (d) {
        return y_scale(d[yaxis_param]);
    });

以下是一个关于如何处理数据缺口的示例:http://bl.ocks.org/mbostock/3035090