JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

JavaScript

var values = [0.2840042, 0.3092592, 0.2292408, 0.2759216, 0.3156256, 0.2816747, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0.2351824, 0.2575918, 0.3159269, 0.3081205, 0.2525052, 0.2366027, 0.3028544, 0.2230674, 0.2258328, 0.265932, 0.2450939, 0.2561149, 0.2542, 0.309653, 0.2305593, 0.2393823, 0.2766308, 0.2619731]
    
// Setup
var w = 400,
    h = 200,
    pad = 10,
    x = d3.scale.linear()
        .domain([0, values.length])
        .range([pad, w-pad]),
    y = d3.scale.linear()
        .domain([0, .4])
        .range([pad, h-pad]),
    xi = function(d, i) { return x(i); },
    yFlipped = function(d) { return h - y(d); },
        
    svg = d3.select(document.body).append('svg')
        .attr('width', w)
        .attr('height', h);

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

// MY PROBLEM: how do I skip appending circles for null's?
svg.selectAll('circle').data(values).enter()
    .append('circle')// <-- I don't want to do this for null'ss
    .attr('fill', '#c00')
    .attr('r', 3)
    .attr('cx', xi)
    .attr('cy', yFlipped)
    
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

// Stuff below here doesn't have to do with my problem
    
// Draw an origin, just for reference
svg.append('line')
    .attr('stroke', '#000')
    .attr('x1', pad)
    .attr('x2', w - pad)
    .attr('y1', h - pad)
    .attr('y2', h - pad);
svg.append('line')
    .attr('stroke', '#000')
    .attr('x1', pad)
    .attr('x2', pad)
    .attr('y1', pad)
    .attr('y2', h - pad);
    
// This just shows how to skip drawing a path for null's
var pathD = d3.svg.line()
      .x(xi)
      .y(yFlipped)
      .defined(function(d) { console.log(d); return d != null; });
svg.append('path')
    .attr('stroke', 'rgba(100,100,255,.4)')
    .attr('stroke-width', '2')
    .attr('fill', 'none')
    .attr('d', pathD(values));