如何使用d3js开始在y轴和它之间绘制一条空格

Question

我正在绘制一个带轴的简单折线图。

// Set the scales
var x = d3.scale.ordinal()
    .domain(data.map(function(d) {
        return d.labels;}))
    .rangeRoundBands([0, width], 0);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.values; })])
    .range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

// draw line graph
var line = d3.svg.line()
    .x(function(d) { return x(d.labels); })
    .y(function(d) { return y(d.values); })
    .interpolate("linear");

// Create the SVG 'canvas'
var svg = d3.select("body").append("svg")
        .attr("class", "chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")");

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

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("path")
  .attr("d",line(data))
  .attr("stroke", color)
  .attr("stroke-width", 2)
  .attr("fill", "none");

在这里你可以看到它有效，但是该行从y轴开始，因此这些值与标签不对应：http://jsfiddle.net/5r63j/12/ 可以通过将.rangeRoundBands([0, width], 0);替换为.rangePoints([0, width], 0);来修复，以便值对应于标签并且它非常好，但y轴和线之间没有填充。

是否可以移动线本身的起点？

Answer 1

关闭但不完全！ ：）

而不是：

.rangePoints([0, width], 0);

你只需使用

.rangePoints([0, width], 0.5);

你会得到这个：

Here is jsfiddle

rangePoints（）的第二个参数的文档是here。参数含义的插图：