D3.js如何为值范围

Question

我正在尝试找到一种向我的D3.js散点图添加网格框的方法。这些框应具有某种颜色，具体取决于它们所在的值范围。例如，x值0-20和y值0-20之间的框应为绿色。

我现在拥有的：

我想要的 - 插图：

我知道我可以为svg添加背景图片，但这似乎不是一个可行的解决方案。

到目前为止我的代码：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 1200 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;


// setup x 
var xValue = function(d) { return d.Impact;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// setup y
var yValue = function(d) { return d.Likelihood;}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");

// setup fill color
var cValue = function(d) { return d.Conf;},
color = d3.scale.category20();

// add the graph canvas to the body of the webpage
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right + 400)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// add the tooltip area to the webpage
var tooltip = d3.select("#chart").append("div")
.attr("class", "tooltip")
.style("opacity", 0);


 // change string (from CSV) into number format
 data.forEach(function(d) {
d,Impact = +d.Impact;
d.Likelihood = +d.Likelihood;
 });

// don't want dots overlapping axis, so add in buffer to data domain
 xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
 yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

// scales w/o extra padding
xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]);
yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]);


// x-axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .attr("class", "grid")
.append("text")
  .attr("class", "label")
  .attr("x", width)
  .attr("y", -6)
  .style("text-anchor", "end")
  .text("Likelihood");

 // y-axis
 svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .attr("class", "grid")
.append("text")
  .attr("class", "label")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Impact");

 // draw dots
 svg.selectAll(".dot")
  .data(data)
.enter().append("circle")
  .attr("class", "dot")
  .attr("r", 5.5)
  .attr("cx", xMap)
  .attr("cy", yMap)
  .style("fill", function(d) { return color(d.CategoryMain);}) 
  .on("mouseover", function(d) {
      tooltip.transition()
           .duration(200)
           .style("opacity", .9);
      tooltip.html(d.CategoryMain + "<br/> " + d.CategorySub1 + "<br/>(" + xValue(d) 
        + ", " + yValue(d) + ")")
           .style("left", (d3.event.pageX + 10) + "px")
           .style("top", (d3.event.pageY - 10) + "px");
  })
  .on("mouseout", function(d) {
      tooltip.transition()
           .duration(500)
           .style("opacity", 0);
  });

  // draw legend
  var legend = svg.selectAll(".legend")
  .data(color.domain())
.enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(160," + (i+7) * 20 + ")"; });

  // draw legend colored rectangles
  legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  // draw legend text
  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d;})


})

有关如何做到这一点的任何建议吗？