Ist ein NVD3 Liniendiagramm mit Markern möglich?

Question

Ich mache ein NVD3-Liniendiagramm, das die Klarheit deutlich verbessern wird, wenn ich Markierungen für jeden Datenpunkt anstelle nur der Linie selbst erhalten kann. Leider habe ich noch keine einfache Möglichkeit gefunden, dies mit NVD3 zu tun. Ich habe auch überlegt, ein Streudiagramm zu verwenden, aber ich konnte nicht herausfinden, wie Verbindungslinien zwischen den Punkten angezeigt werden. Eine dritte Option, die ich in Betracht gezogen habe, war das Überlagern eines Linien- und Streudiagramms, aber dies würde jede Serie zweimal in der Legende zeigen und andere unnötige visuelle Komplikationen verursachen.

Gibt es eine Möglichkeit, dies schon elegant zu machen? Beispielcode meiner Formatierungstechnik ist unten aufgeführt, aber die Attribute "Größe" und "Form" in test_data haben keine Auswirkung auf das Liniendiagramm mit dem aktuellen Code.

test_data = [ {  key: 'series1', 
      values: [ 
       { x: 1, y: 2.33, size:5, shape:"circle" }, 
       { x: 2, y: 2.34, size:5, shape:"circle" }, 
       { x: 3, y: 2.03, size:5, shape:"circle" }, 
     ] } ]; 


nv.addGraph(function() { 
    var test_chart = nv.models.lineChart(); 
    test_chart.xAxis.axisLabel('Sample Number'); 
    test_chart.yAxis 
     .axisLabel('Voltage (V)') 
     .tickFormat(d3.format('.02f')); 

    d3.select('#test_plot') 
     .datum(test_data) 
    .transition().duration(500) 
     .call(test_chart); 

    nv.utils.windowResize(test_chart.update); 
    return test_chart; 
}); 

Answer 1

Ich wollte auch Marker in einem Projekt hinzufügen, an dem ich gerade arbeitete. Hier ist eine Lösung, die mein Partner und ich gefunden haben.

Zuerst müssen Sie alle Punkte in Ihrem Diagramm wählen und stellen Sie die Fill-Opazität bis 1:

#my-chart .nv-lineChart circle.nv-point 
{ 
    fill-opacity: 1; 
} 

Jetzt Ihre Punkte sichtbar. Um die Größe jedes Punktes anzupassen, müssen Sie jedes Attribut "r" (für Radius) ändern. Dies ist kein Stil, so dass Sie es nicht mit CSS tun können. Hier ist etwas jQuery-Code, der den Job erledigt. Die Verzögerung von 500 Millisekunden ist so, dass der Code nicht ausgeführt wird, bevor das Diagramm gerendert wird. Dieser Code-Schnipsel setzt den Radius bis 3,5:

 setTimeout(function() { 
      $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5"); 
     }, 500); 

Answer 2

Selektiv ermöglichen Punkte zu einigen Serien die folgende Logik in nvd3 verwenden.

//i is the series number; starts with 0 

var selector = 'g.nv-series-'+i+' circle'; 
d3.selectAll(selector).classed("hover",true); 

jedoch ein zusätzlicher Parameter (wie sagen 'enable_points': 'true') in den Daten wäre besser Sinn machen. Ich werde hoffentlich mit dieser Idee einige Änderungen an nvd3 vornehmen.

Answer 3

Die aktuelle Version von nvd3 verwendet Pfad anstelle von Kreis, um Markierungen zu zeichnen. Hier ist ein Teil des CSS-Codes, den ich verwendet habe, um Marker zu zeigen.

#chart g.nv-scatter g.nv-series-0 path.nv-point 
{ 
    fill-opacity: 1; 
    stroke-opacity: 1; 
} 

Und ich etwas über diese auch in https://github.com/novus/nvd3/issues/321 schreiben, könnten Sie feststellen, dass, wie ich die Form Entscheidungsträger ändern.

Ich weiß nicht, wie man die Größe von Markern ändert. Versuchen, eine Lösung zu finden.

Answer 4

Das verwirrte mich, bis ich Hilfe aus der Community bekam:

css styling of points in figure

So, hier ist meine Lösung, basierend auf css:

.nv-point { 
    stroke-opacity: 1!important; 
    stroke-width: 5px!important; 
    fill-opacity: 1!important; 
} 

Wenn jemand von rCharts hier gekommen ist, unter ist eine Vorlage, um eine nPlot mit beiden Linien und Markierungen zu erstellen:

```{r 'Figure'} 
require(rCharts) 
load("data/df.Rda") 
# round data for rChart tooltip display 
df$value <- round(df$value, 2) 
n <- nPlot(value ~ Year, group = 'variable', data = df, type = 'lineChart') 
n$yAxis(axisLabel = 'Labor and capital income (% national income)') 
n$chart(margin = list(left = 100)) # margin makes room for label 
n$yAxis(tickFormat = "#! function(d) {return Math.round(d*100*100)/100 + '%'} !#") 
n$xAxis(axisLabel = 'Year') 
n$chart(useInteractiveGuideline=TRUE) 
n$chart(color = colorPalette) 
n$addParams(height = 500, width = 800) 
n$setTemplate(afterScript = '<style> 
    .nv-point { 
    stroke-opacity: 1!important; 
    stroke-width: 6px!important; 
    fill-opacity: 1!important; 
    } 
</style>' 
) 
n$save('figures/Figure.html', standalone = TRUE) 
``` 

Answer 5

Für die aktuelle Version von NVD3 (1.8.x), verwende ich diese-D3-basierte Lösung (Scripting nur, kein CSS-Datei oder Style-Block erforderlich):

nv.addGraph(function() { 
    // ... 
    return chart; 
}, 
function() { 
    // this function is called after the chart is added to document 
    d3.selectAll('#myChart .nv-lineChart .nv-point').style("stroke-width", 
    "7px").style("fill-opacity", ".95").style("stroke-opacity", ".95"); 
} 
); 

Die Stile verwendet werden, genau die von NVD3 hinzugefügt Artikel von der „schweben“ Klasse zu jedem Punkt der Anwendung (wenn schwebte). Passen Sie sie an Ihre Bedürfnisse an.