javascript - 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();