D3中日期的简单折线图

Simple line graph with dates in D3

本文关键字：简单 折线图 日期 D3      更新时间：2023-09-26

我正在努力掌握D3，并希望绘制一个沿x轴的7天简单折线图的演示。到目前为止我已经http://jsfiddle.net/wRDXt/1/

// Define the resolution
var width = 500;
var height = 250;    
// Create the SVG 'canvas'
var svg = d3.select("body")
    .append("svg")
    .attr("viewBox", "0 0 " + width + " " + height)
// get the data
var dataset = [
    { date: new Date(2013, 17, 1), value: 1 },
    { date: new Date(2013, 17, 2), value: 2 },
    { date: new Date(2013, 17, 3), value: 3 },
    { date: new Date(2013, 17, 4), value: 4 },
    { date: new Date(2013, 17, 5), value: 5 },
    { date: new Date(2013, 17, 6), value: 6 },
    { date: new Date(2013, 17, 7), value: 7 }
];
// Define the padding around the graph
var padding = 50;
// Set the scales
var minDate = d3.min(dataset, function(d) { return d.date; });
minDate.setDate(minDate.getDate() - 1);
var maxDate = d3.max(dataset, function(d) { return d.date; });
var xScale = d3.scale.linear()
    .domain([minDate, maxDate])
    .range([padding, width - padding]);
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d.value; })])
    .range([height - padding, padding]);
// x-axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickFormat("todo")
    .tickSize(5, 5, 0)
svg.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);
// y-axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickFormat(function (d) { return d; })
    .tickSize(5, 5, 0)
    .ticks(5); // set rough # of ticks
svg.append("g")
    .attr("class", "axis y-axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
// Scatter plot
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "data-point")
    .attr("cx", function(d) {
        return xScale(d.date);
    })
    .attr("cy", function(d) {
        return yScale(d.value);
    })
    .attr("r", 5);
// line graph
var line = d3.svg.line()
    .x(function(d) { 
        return xScale(d.date); 
    })
    .y(function(d) { 
        return yScale(d.value); 
    });
svg.append("svg:path").attr("d", line(dataset));

我遇到了一些问题：

  • 如何让x轴每天显示一个刻度（我希望每个刻度都与数据点匹配并对齐）
  • 由于某种原因，线形图位像多边形一样填充
  • 如何很好地格式化轴上的刻度文本，使其像"1 JUL"、"2 JUL"等
  • 如何使第一个日期值显示在第一个刻度而不是y轴上？我试着在minDate上休息一天，但它影响了绘图，正如你所看到的

我已经更新了您的jsfiddle，以便在这里执行您想要的操作。简单地说，我做了以下事情：

  • 使用时间刻度而不是线性刻度。然后可以将d3.time.days, 1指定为ticks
  • 默认情况下，路径填充时没有笔划。请参阅我添加的CSS
  • 使用具有适当格式的.tickFormat函数
  • 应使用时间刻度和适当的刻度规格进行固定
相关文章：