D3.js 用背景填充图形的一部分

Question

我有一个基本的折线图，上面有两条这样的线

我想在只有蓝线的部分应用背景以突出显示两条线所在的部分。在 D3.js 中执行此操作的最佳方法是什么？

我的部分代码

x = d3.time.scale()
  .domain([date_from, date_to])
  .range([0, width])

y = d3.scale.linear()
  .domain([15, 30])
  .range([height, 0])

line = d3.svg.line()
  .x((d, i) -> x(parseDate(d.date)))
  .y((d) -> y(d.price))

svg = d3.select("#graph").append("svg:svg")
  .attr("width", width + 50)
  .attr("height", height + 50)
  .append("svg:g")
  .attr("transform", "translate(25, 25)")

svg.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, #{height})")
  .call(xAxis)

svg.append("svg:g")
  .attr("class", "grid")
  .attr("transform", "translate(0, #{height})")
  .call(xAxis.tickSize(-height, 0, 0).tickFormat("").ticks(80))

svg.append("svg:g")
  .attr("class", "grid")
  .call(yAxis.tickSize(-width, 0, 0).tickFormat("").ticks(40))

svg.append("svg:path")
  .attr("class", "line")
  .attr("d", line(data))
  .style("stroke", (d) -> color("year"))

svg.append("svg:path")
  .attr("class", "line")
  .attr("d", line(data2))
  .style("stroke", (d) -> color("month"))

Answer 1

在图表的该部分绘制一个rect 元素。

var rectangle = svg.append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("width", x(firstXValueOfSecondLine))
                    .attr("height", chartHeight)
                    .style('opacity', 0.5)
                    .style('fill', '#ededed');