D3.js:scaleTime不工作（奇怪的结果）

我发现下面的图表使用了d3的V3：

我曾尝试将该示例移植到V5，但仍使用scaleTime（）。图表显示不正确。 我很难调试var x，因为它是一个函数。。。但是，如果我查看元素svg:clipPath，我会看到以下内容（注意奇怪的值）：

在这里，您可以找到一个用于测试的操场：

---

scaleTime的默认域是

用域[2000-01-01，2000-01-02]和单位范围[0，1]构造一个新的时间尺度

当您将范围设置为常量时，为什么要使用

x（v）

和

y（v）

来获取这些范围，并且您可以获取范围并使用

[0]

和

[1]

---

---

让你的缩放矩形填充为无，它隐藏了图形

@ialarmedalien:我曾经在文档中读到它只是方向向量，而不是%，但现在在几乎相同的位置，它们现在也允许%@rioV8:对不起，我不明白。我知道默认值是错误的，但它是在http请求（异步）之后设置的。总而言之，设置比例似乎是可行的，因为我看到y比例从0到20000。即使我将域正确地添加到脚本的顶部，结果也是一样的。顺便说一句-感谢填充提示：无…@Gerfried您在加载数据之前创建clippath，因此您使用derfault域，

0

和

1

在时域尺度中具有特殊意义

<clipPath id="clip"><rect x="-8119106.125" y="0" width="0.000008575618267059326" height="361"></rect></clipPath>

var w=1280, h=800;
var svg = d3.select("#zoomable-area-chart").append("svg:svg");
(....)

// Scales
var x = d3.scaleTime().range([0, w]),
    y = d3.scaleLinear().range([h, 0]),

svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", x(0))
    .attr("y", y(1))
    .attr("width", x(1) - x(0))
    .attr("height", y(0) - y(1));

d3.csv("http://localhost/data.csv").then((data) => {

     // Parse dates and numbers.
    data.forEach(function(d) {
        d.date = parse(d.date);
        d.value = +d.value;
    });

    // Compute the maximum price.
    x.domain([new Date(1999, 0, 1), new Date(2003, 0, 0)]);
    y.domain([0, d3.max(data, function(d) {
        return d.value;
    })]);

    draw();
});