D3.js Fokus + Kontext über das Bürsten der Ordinalskala

Question

Ich bin noch sehr neu zu d3.js und habe einen Focus + Context über Brushing zu meinem Streudiagramm hinzugefügt, das eine logarithmische y-Achse und ordinale x-Achsenskala hat, aber es funktioniert nicht wie beabsichtigt. Das Bürsten scheint auf der X-Achse mit einem Offset zu arbeiten, zeigt aber nicht nur den ausgewählten Artikel/die ausgewählten Artikel.

Unten ist meine gebürstet Funktion:

// Brush Function 
function brushed() { 
    var extent = brush.extent(); 
    var d = xScale2.domain(), 
     r = xScale2.range(); 
    extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; }); 
    xScale.domain(brush.empty() ? d : extent); 
    focus.select(".x.axis") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("transform", "rotate (-65)"); 
    focus.selectAll(".point") 
     .attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; })) 
     .attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; }) 
     .style("fill", function(d) { return colors[d.TYPE_CODE]; }); 
} 

Wenn jemand dabei helfen kann (vor allem all Orten, muß ich ändern und wie), ich würde lieben, diese Funktion zu erhalten und zu lernen, was ich tue falsch.

Voll-Code an: http://jsfiddle.net/brebuck/LL42b4L7/

Answer 1

Figured meine eigene Lösung für das Problem aus.

die Funktion Pinsel geändert:

// Brush Function 
function brushed() { 
    var extent = brush.extent(); 
    var d = xScale2.domain(); 

    // Find out what is selected between the extent on the Ordinal Axis. 
    var SymbolInside = data.filter(function(d) { 
    return extent[0] <= xScale2(dateFn(d)) && xScale2(dateFn(d)) <= extent[1]; 
    }); 

    // Convert the Array of objects to return a single array of dates used for the ordinal axis. 
    SymbolInside = SymbolInside.map(function (d) { return dateFn(d); }); 

    xScale.domain(brush.empty() ? d : SymbolInside); 
    focus.select(".x.axis") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("transform", "rotate (-65)"); 
    focus.selectAll(".point") 
     .attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; })) 
     .attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; }) 
     .style("fill", function(d) { return colors[d.TYPE_CODE]; }); 
} 

Aktualisiert-Code an: http://jsfiddle.net/brebuck/LL42b4L7/