Question

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

我正在尝试构建一个相当简单的条形图/柱形图，其中x轴为日期，y轴为简单计数。我目前正试图让轴正确，并有一些问题：

如何每天/日期获得一个刻度（和一个条形码）（图表将涵盖30天的时间段）
如何让y轴刻度为整数（目前给我~0,0.5,1,1.5等）
如何获取刻度标签以响应text-anchor ...开始还是结束？

我创建了一个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

您可以指定这样的刻度数：

// 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);

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

与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);

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

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

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

此处文本主题样式从默认的“结束”更改为“中间”。

这是一个修改过的jsbin，上面的修改和轴的声明清理了一下：http://jsbin.com/axafid/9/edit

d3.js：带时间序列的条形图 - 1滴答＆amp;每个日期的栏，舍入数字

1 个答案: