D3 Domain Line Domain

Question

Я рисую линейную диаграмму с использованием данных D3 с некоторыми данными из нашей базы данных. Я получил некоторые данные за весь год, чтобы рассчитать, какая будет наша линия тренда (принимая некоторые значения для 8am, 12m, 16pm и 9pm) Я рисую это на диаграмме с указанием пути и значений для каждого X (время).

Теперь моя проблема в области тренда, конечно, больше, чем наши текущие значения (скажем, его 2 часа дня, и моя линия тренда всегда будет идти до 9 вечера). Замкнутая я получил садилось домен Trendline к моей текущей области данных, которая возвращает это: Test1

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

Как я могу сократить его, чтобы он не выходит за пределы ширины SVGs? Я попытался установить атрибут width, и он не работает, поэтому я предполагаю, что он имеет какое-то отношение к домену.

Если я устанавливаю домен Trendline к его данным, я получаю это: Test2

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

PS: В то время как мы на это, если кто-нибудь может указать мне о том, как я мог бы видеть, если моя линия выше -below мой трендовая это было бы здорово;)

Update: Благодаря @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