2016-05-29 14 views
0

Ich erstelle gerade ein Balkendiagramm, das Daten aus einem d3-Histogramm abruft.d3 Histogramm und Balkendiagrammdaten

schaffe ich das Histogramm wie folgt aus:

var binningThresholds = d3.range(getMinValue(rows, 'Model year'), getMaxValue(rows, 'Model year') + 2) 

var histogram = d3.layout.histogram() 
    .value(getModelYear) 
    .bins(binningThresholds) 
    (rows); 

ich Zeilen aus einer CSV-Eingang. Ich mache schon eine Menge Sachen mit dem Input, so dass das gut funktioniert.

Das Histogramm ist jetzt ein Array aus einem Array von Objekten.

Wenn ich will jetzt diese histogram und fügen Sie eine Bar zu einem Diagramm für jeden Index in dem Array verwenden, zeigt keine Fehler und d3 anhängen keine g, rect oder text-Tags auf das DOM.

var histogramBars = histogramSvg.selectAll('g') 
    .data(histogram) 
    .enter() 
    .append('g'); 

histogramBars.append('rect'); 

histogramBars.append('text') 
    .text(function(d) { 
     return d.length; 
    }) 

Ich weiß wirklich nicht warum, sieht jemand einen Fehler?

Antwort

2

Verwenden Sie nicht .selectAll('g').data..., meine Vermutung ist, dass es andere g Elemente in Ihrer Visualisierung gibt und Sie Dinge auswählen, die Sie nicht wollen. Stattdessen etwas tun wie:

var histogramBars = histogramSvg.selectAll('.myUniqueClass') 
    .data(histogram) 
    .enter() 
    .append('g') 
    .attr('class', 'myUniqueClass'); 
+0

Vielen Dank, das war es genau. – luuksen

+0

@Mark, es funktioniert auch dann, wenn Sie die '.attr ('class', 'myUniqueClass')' '. –

+1

@GerardoFurtado, wird es für die erste 'enter' Auswahl. Wenn er jedoch den Update- oder den Exit-Fall behandeln muss, wird es notwendig sein. – Mark