D3: So zeigen Sie einen freien Punkt in einem Liniendiagramm

Question

Ich habe einige Daten, bei denen möglicherweise nur wenige Datenpunkte verfügbar sind (=== null). Um zu zeigen, dass Daten fehlen, verwende ich die line.defined Funktion von d3 (wie zeigen here). Das Problem ist, dass ich manchmal einen Punkt habe, der auf keiner Seite einen Wert hat und daher nicht in der Grafik angezeigt wird.

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

Wie Sie sehen können, werden die Daten für April fehlt 27 und 29 und so ist die Linie disjunkt. Groß. Der Datenwert am 28. April ist nicht null, wird jedoch nicht angezeigt.

Ich möchte, dass ein Punkt für den 28. April angezeigt wird. Was vermisse ich? Muss ich jedem Punkt einen Punkt (Svg-Kreis) hinzufügen, so dass jeder Punkt für sich allein angezeigt wird?

Answer 1

Sie zeichnen nur die Zeilen mit

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

Wenn Sie den Kreis wie das Beispiel zeichnen möchten Sie zur Verfügung gestellt, müssen Sie

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); 

Siehe http://jsfiddle.net/tgx48xzn/

PS hinzuzufügen:

Wenn Sie die Nullwertpunkte ausblenden möchten, c eine hatte

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

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

PS 2

, wenn Sie nur die isolierten Punkte zeigen wollen, Filter, wie die

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

}) 

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