Question

我发现以下图表使用了d3的V3： http://mbostock.github.io/d3/talk/20111018/area-gradient.html

我试图将样本移植到V5，但是我被scaleTime（）困住了。图表显示不正确。我很难调试var x，因为它是一个函数...但是，如果我看一下svg：clipPath元素，我会看到这一点（注意奇怪的值）：

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

在这里您可以找到测试场： https://plnkr.co/edit/qWlLIg2avCe2Kt88r0T5?p=preview

Answer 1

scaleTime的默认域是

使用域[2000-01-01，2000-01-02]，单位范围[0，1]构建新的时间标度

为什么将x(v)和y(v)设置为常数后才能到达范围，并且可以获取范围并使用[0]和[1]。

不进行缩放填充，它会隐藏图形

D3.js：scaleTime不起作用（奇怪的结果）

1 个答案: