图表区域外的d3js网格

Question

我已经用d3js库创建了一个图表。

有什么方法可以使网格线超出图表的区域，如何在图像上显示网格线 ？

轴创建功能：

this.axis = function (scale, size) {
    return d3.svg.axis()
        .scale(scale)
        .outerTickSize(0)
        .innerTickSize(-size)
        .tickPadding(10);
};

将图表添加到svg：

var line = d3.svg.line()
    .x(function (d) {
        return x(d.x);
    })
    .y(function (d) {
        return y(d.y);
    })
    .interpolate('monotone');

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + (height - 35) + ')')
    .call(xAxis);

svg.append('g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(40, 0)')
    .call(yAxis);

var series = svg.selectAll('.quote')
    .data(points)
    .enter()
    .append('g')
    .attr('class', 'quote');

series.append('path')
    .attr('class', function(d) { return 'line ' + d.name; })
    .attr('d', function(d) { return line(d.values); });

Answer 1

您可以在用于构建xAxis的x尺度上调用nice()

var x = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width])
    .nice();