2

还是 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);
}

谢谢！

4

1 回答 1

4

  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

于 2013-08-14T23:25:14.613 回答