d3.js：带有时间序列的条形图 - 每个日期 1 个刻度线和条形图，四舍五入

Question

D3.js 还是新手...这是我的第二张图表。

我正在尝试构建一个相当简单的条形图/柱形图，x 轴为日期，y 轴为简单的计数。我目前正在尝试正确设置轴，但遇到了一些问题：

1. 我如何获得每天/日期的一个刻度（和一个柱形图）（图表将涵盖 30 天的时间段）
2. 如何让 y 轴刻度为整数（目前给我 ~ 0、0.5、1、1.5 等）
3. 如何让刻度标签响应文本锚点...开始或结束？

我创建了一个 jsbin 来说明：http://jsbin.com/axafid/4/

这是我目前的数据和代码（部分基于本教程：http://bl.ocks.org/phoebebright/3061203）

    var testData = [
        {
            date: "2013-06-25",
            programs: 1
        },
        {
            date: "2013-06-26",
            programs: 2
        },
        {
            date: "2013-06-27",
            programs: 3
        },
        {
            date: "2013-06-28",
            programs: 0
        },
        {
            date: "2013-06-29",
            programs: 0
        },
        {
            date: "2013-06-30",
            programs: 0
        },
        {
            date: "2013-07-01",
            programs: 1
        },

        {
            date: "2013-07-02",
            programs: 3,
            premiums: 9000
        },
        {
            date: "2013-07-03",
            programs: 1
        },
        {
            date: "2013-07-04",
            programs: 4
        },
        {
            date: "2013-07-05",
            programs: 0
        },
        {
            date: "2013-07-06",
            programs: 0
        },
        {
            date: "2013-07-07",
            programs: 0
        },
        {
            date: "2013-07-08",
            programs: 1
        },
        {
            date: "2013-07-09",
            programs: 2
        },
        {
            date: "2013-07-10",
            programs: 2
        },
        {
            date: "2013-07-11",
            programs: 4
        },
        {
            date: "2013-07-12",
            programs: 4
        },
        {
            date: "2013-07-13",
            programs: 0
        },
        {
            date: "2013-07-14",
            programs: 0
        },
        {
            date: "2013-07-15",
            programs: 2
        },
        {
            date: "2013-07-16",
            programs: 2
        },
        {
            date: "2013-07-17",
            programs: 1
        },
        {
            date: "2013-07-18",
            programs: 5
        },
        {
            date: "2013-07-19",
            programs: 1
        },
        {
            date: "2013-07-20",
            programs: 0
        },
        {
            date: "2013-07-21",
            programs: 0
        },
        {
            date: "2013-07-22",
            programs: 3
        },
        {
            date: "2013-07-23",
            programs: 3
        },
        {
            date: "2013-07-24",
            programs: 3
        }
]

还有我的javascript：

function renderGraph(){

        var margin = {top: 20, right: 16, bottom: 32, left: 64},// space around the chart, not including labels
            width = (mainWidth() - margin.left - margin.right),   // width of svg
            height = 400,  // height of svg
            parseDate = d3.time.format("%Y-%m-%d").parse;

        var data = testData;

        var x_domain = d3.extent(data, function(d) { return parseDate(d.date); }),
            y_domain = [0, d3.max(data, function(d) { return d.programs; })]


        // display date format
        var  date_format = d3.time.format("%d %b");

        // create an svg container
        var vis = d3.select("#programs-renewing-graph")
                .append("svg:svg")
                .attr("width", width)
                .attr("height", height);

        // define the y scale  (vertical)
        var yScale = d3.scale.linear()
            .domain(y_domain).nice()   // make axis end in round number
            .range([height - margin.top, margin.bottom]);// map these to the chart height, less padding.

        var xScale = d3.time.scale()
            .domain(x_domain)
            .range([32, width - margin.right]);

        // define the y axis
        var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);

        // define the x axis
        var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .tickFormat(date_format);

        // draw y axis with labels and move in from the sides by the amount of padding
        vis.append("g")
            .attr("class", "axis")
            .attr("transform", "translate("+margin.left+",0)")
            .call(yAxis);

        // draw x axis with labels and move to the bottom of the chart area
        vis.append("g")
            .attr("class", "xaxis axis")  // two classes, one for css formatting, one for selection below
            .attr("transform", "translate(" +margin.left+ "," + (height - margin.top) + ")")
            .call(xAxis);
}

谢谢！

Answer 1

1. 您可以像这样指定刻度数：

   // define the x axis
   var xAxis = d3.svg.axis()
       .orient("bottom")
       .scale(xScale)
       .ticks(d3.time.days(x_domain[0], x_domain[1]).length)
       .tickFormat(date_format);
   

   将刻度数指定为轴域中的天数。

2. 与 1 相同，但使用整数：

   // define the y axis
   var yAxis = d3.svg.axis()
       .orient("left")
       .ticks(d3.range(y_domain[0], y_domain[1], 1).length)
       .scale(yScale);
   

   将刻度数指定为整数域范围的长度。

3. 您可以通过在使用轴生成器创建刻度标签后选择它们来访问和更改刻度标签，如下所示：

   vis.append("g")
       .attr("class", "axis")
       .attr("transform", "translate("+margin.left+"," + margin.top + ")")
       .call(yAxis)
       .selectAll('text')
         .style('text-anchor','middle');
   

   这里的文本锚样式从默认的“end”更改为“middle”。

这是一个修改后的 jsbin，上面做了一些改动，并且对轴的声明做了一点清理：http://jsbin.com/axafid/9/edit