CODEWITHSUNDEEP
javascriptd3.js
yeniv
yeniv

Reputation: 1639

D3: how to show lone point in a line chart

I have some data where few data points may not be available (=== null). To show that data is missing, I am using the line.defined function of d3 (as show here) . The problem is that sometimes I have a point which does not have a value on either side and hence does not get displayed on the graph.

Demo: http://jsfiddle.net/nxrdybdx/3/

As you can see, data is missing for April 27 and 29 and so the line is disjoint. Great. The data value on April 28 is non-null but does not get displayed.

I want that a dot gets displayed for April 28. What am I missing? Do I need to add a dot (svg circle) corresponding to each point so that when alone, each point gets displayed on its own?

Upvotes: 3

Views: 3804

Answers (1)

Tim B
Tim B

Reputation: 1983

You are only drawing the lines with 

svg.append("path") // Add the valueline path.
.attr("d", valueline(data));

If you want to draw the circle like the example you provided, you need to add

svg.selectAll(".dot")
    .data(data.filter(function(d) { return d; }))
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);

See http://jsfiddle.net/tgx48xzn/

PS :

if you want to hide the null value points, you can had 

.filter(function(d) { return d.close !== null })

See http://jsfiddle.net/tgx48xzn/1/

PS 2

if you want to show only the isolated points, filter like that 

.filter(function(d, i) {
    return d.close !== null && i > 1
    && data[i - 1].close === null
    && data[i + 1].close === null;

})

See http://jsfiddle.net/tgx48xzn/3/

Upvotes: 2

Related Questions