// source http://jsbin.com/qohipov

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<svg width="600" height="400"></svg>
<script id="jsbin-javascript">
// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
    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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]

// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)

// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
  .domain(allDataMinMaxX)
  .range([0, width])
var y = d3.scaleLinear()
  .domain(allDataMinMaxY)
  .range([height, 0])

// Функция линии
var line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))

// Добавляем ось снизу
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Добавляем ось слева
g.append("g")
  .call(d3.axisLeft(y))

// Добавляем линию
g.append("path")
  .datum(lineData)
  .attr("fill", "none")
  .attr("stroke", "#3e95cd")
  .attr("d", line)

// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
  // Выясняем минимальную и максимальные точки по x и y.
  var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]

  g.append("rect")
  // Ширина = максимум минус минимум
    .attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
  // Высота = высота всего графика
    .attr("height",  height)
  // Отступ слева
    .attr("x", x(materialMinMaxX[0]))
  // Отступ сверху
    .attr("y", 0)
  // Цвет
    .attr("fill", fill)
}

drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
    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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]

// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)

// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
  .domain(allDataMinMaxX)
  .range([0, width])
var y = d3.scaleLinear()
  .domain(allDataMinMaxY)
  .range([height, 0])

// Функция линии
var line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))

// Добавляем ось снизу
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Добавляем ось слева
g.append("g")
  .call(d3.axisLeft(y))

// Добавляем линию
g.append("path")
  .datum(lineData)
  .attr("fill", "none")
  .attr("stroke", "#3e95cd")
  .attr("d", line)

// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
  // Выясняем минимальную и максимальные точки по x и y.
  var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]

  g.append("rect")
  // Ширина = максимум минус минимум
    .attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
  // Высота = высота всего графика
    .attr("height",  height)
  // Отступ слева
    .attr("x", x(materialMinMaxX[0]))
  // Отступ сверху
    .attr("y", 0)
  // Цвет
    .attr("fill", fill)
}

drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")

</script>

jsbin.qohipov.js

// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
    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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]

// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)

// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
  .domain(allDataMinMaxX)
  .range([0, width])
var y = d3.scaleLinear()
  .domain(allDataMinMaxY)
  .range([height, 0])

// Функция линии
var line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))

// Добавляем ось снизу
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Добавляем ось слева
g.append("g")
  .call(d3.axisLeft(y))

// Добавляем линию
g.append("path")
  .datum(lineData)
  .attr("fill", "none")
  .attr("stroke", "#3e95cd")
  .attr("d", line)

// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
  // Выясняем минимальную и максимальные точки по x и y.
  var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]

  g.append("rect")
  // Ширина = максимум минус минимум
    .attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
  // Высота = высота всего графика
    .attr("height",  height)
  // Отступ слева
    .attr("x", x(materialMinMaxX[0]))
  // Отступ сверху
    .attr("y", 0)
  // Цвет
    .attr("fill", fill)
}

drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")