Javascript d3.js-如果y.domain不'；不要从零开始

如何将面积图的内容限制在由两个轴确定的区域内

情况是这样的。如果我将垂直域设置为介于0和数据集最大值之间，则没有问题：

y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);

但是，有时我不能从0开始。当我需要从数据集中的最小数字开始时，问题出现了：

y.domain([0.91*d3.min(data, function(d) { return d.value; }), 1.1*d3.max(data, function(d) { return d.value; })]);

如您所见，图表的蓝色区域在底部水平轴上流动，这非常难看和混乱。我可以用折线图来避免这个问题，但我更愿意用面积图来解决这个问题。有什么解决办法吗

编辑这是我正在使用的完整代码。如果

full

参数为

true

，则图表从0开始。如果不是，则从数据最小值开始

function create_area_chart(data, full){
    var svg = d3.select(".chart-holder").append("svg").attr("width","800").attr("height", "400")
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%Y-%m-%d")
        bisectDate = d3.bisector(function(d) { return d.date; }).left;

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);

    var area = d3.area()
        .x(function(d) { return x(d.date); })
        .y1(function(d) { return y(d.value); });

    data.forEach(function(d) {
        d.date = parseTime(d.date);
        d.value = +d.value;
    });

    x.domain(d3.extent(data, function(d) { return d.date; }));
    if(full)
        y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);
    else
        y.domain([0.91*d3.min(data, function(d) { return d.value; }), 1.1*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0));

    g.append("path")
        .datum(data)
        .attr("fill", "steelblue")
        .attr("d", area);

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Price ($)");

    svg.append("rect")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height);
}

---

我认为问题可能来自你的体重秤的范围

也许试一下

var y = d3.scaleLinear()
        .rangeRound([height-margin.bottom, margin.top]);

---

编辑：这可能不是你的代码有什么问题，因为你已经定义了

height

减去两个边距。对不起，祝你好运

您需要通过更改

y0

if(full){
    y.domain([0, 1.1*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0));
} else {
    y.domain([0.91*d3.min(data, function(d) { return d.value; }), 1.1*d3.max(data, function(d) { return d.value; })]);
    area.y0(y(0.91*d3.min(data, function(d) { return d.value; })));
}

见文件：

编辑

重现问题 考虑OP的代码改编自的这个区域

我运行示例中的代码，得到以下曲线图：

一切如期而至。

y域

和

y0

设置如下：

y.domain([0, d3.max(data, function(d) { return d.close; })]);
area.y0(y(0));

现在，如果我将

y域

更改为：

y.domain([
    0.91*d3.min(data, function(d) { return d.close; }),
    d3.max(data, function(d) { return d.close; })
]);

area.y0(y(0.91*d3.min(data, function(d) { return d.close; })));

我得到下面的图：

我们得到了溢出，但是如果我现在将

y0（）

更改为匹配新的

y域

：

y.domain([
    0.91*d3.min(data, function(d) { return d.close; }),
    d3.max(data, function(d) { return d.close; })
]);

area.y0(y(0.91*d3.min(data, function(d) { return d.close; })));

哪些绘图：

---

溢出现在已经纠正。

你如何称呼你的轴？@ArnaudStephan你必须详细说明，我不知道你在问我什么。你如何将垂直轴和水平轴附加到你的

。图表夹上

？编辑：嗯，我需要咖啡，我没有看到你的代码更长，我必须滚动才能看到end@ArnaudStephan哦，你的意思是呼叫（d3.axisBottom）等等。我也困惑了一会儿：）不，这只是将整个y轴向上移动并远离x轴。谢谢你的尝试，真的应该。您是否正在设置

area.y0（y（0））除了if语句之外，还有其他地方吗？你是对的。我有一些代码被双重粘贴，在我按照你说的设置后，它在那里留下了0.y0位的区域。谢谢。没问题，我只是编辑了我的答案来重现你的问题。