score:0

Seems like the temps array has numbers with decimal points. If the temps array values lies between the numRange, you can just round the temp value to fix this issue.

.attr("fill", function(d, i) {
        return color(Math.round(d));
});

var temps = [25.2, 1.45, 240.25, 3.1],
  coors = [{
    x: 10,
    y: 20
  }, {
    x: 50,
    y: 60
  }, {
    x: 50,
    y: 80
  }, {
    x: 90,
    y: 100
  }];

var color_chart = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 500);

var numRange = [1, 1.5, 2, 2.5, 3, 4, 5, 7, 10, 15, 25, 45, 70, 100, 150, 240],
  colorRange = ["#0500FF", "#0100FF", "#0022FF", "#0064FF",
    "#00A4FF", "#00E4FF", "#00FF83", "#17FF00",
    "#B0FF00", "#FFF000", "#FFC800", "#FFA000",
    "#FF7800", "#FF5000", "#FF2800", "#FF0000"
  ],
  gradientRange = [];

var defs = color_chart.append("defs");

for (var i = 0; i < colorRange.length; i++) {
  var gradient = defs.append("radialGradient")
    .attr("id", "radial-gradient" + i);

  gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 1);

  gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 0);

  gradientRange.push("url(#radial-gradient" + i + ")");
};

console.log(numRange);
console.log(gradientRange);

var color = d3.scale.linear()
  .domain(numRange)
  .range(gradientRange);

color_chart.selectAll("circle")
  .data(temps)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    return coors[i].x
  })
  .attr("cy", function(d, i) {
    return coors[i].y
  })
  .attr("r", 10)
  .attr("fill", function(d, i) {
    return color(Math.round(d));
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag