Question

我使用D3绘制折线图和我们数据库中的一些数据，我得到了一整年的数据来计算我们的趋势线（在上午8点，下午12点，下午4点和晚上9点采取一些值），我正在绘制这在图表中包含每个X（时间）的路径和值。

现在我的问题是趋势线的域当然比我们当前的值更大（假设它的下午2点，我的趋势线总是会到晚上9点）。我得到的关闭是将trendline的域设置为我当前的数据域，该域返回： Test1

xTrend.domain(d3.extent(trendData, function (d) { return d.date; }));

如何切割它以使其不超出SVG宽度？我尝试设置width属性并且它不起作用，所以我的猜测是它与域有关。

如果我将trendline的域设置为其数据，我会得到： Test2

xTrend.domain(d3.extent(data, function (d) { return d.date; }));

PS：虽然我们在这方面，如果有人能指出我如何看到我的线是否高于我的趋势线，那将是伟大的;）

更新感谢@lhoworko 我添加了这个

svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

这是我的直线路径

.attr("clip-path", "url(#clip)")

Answer 1

看看d3剪辑路径。它将确保不会显示超出图表末尾的行。

看看这里。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

D3趋势线域

1 个答案: