D3.js序數比例軸錯誤對齊

我有一個簡單的d3條形圖（請參閱fiddle）。它說明了分數。基本上是一個正常的分佈圖。 x軸是從0到2分數的有序範圍。D3.js序數比例軸錯誤對齊

我的x軸不與對應的條對齊。

如果您在創建畫筆範圍並單擊欄時查看JS控制檯，則選定的欄與軸標籤不匹配。

這些標籤似乎與條形產生負面偏移。

我在做什麼錯？

function drawChart (data) { 
    // Setup Crossfilter dimensions and groups 
    var nation  = crossfilter(data), 
     byScr  = nation.dimension(function(d){ return d.score; }), 
     byScrGrp = byScr.group().reduceCount(), 
     byHosp  = nation.dimension(function(d){ return d.FIPS; }); 

    // Histogram X-Axis ordinal scale 
    var x = d3.scale.ordinal() 
      .domain(d3.range(0,2,0.1)) 
      .rangeBands([0, width, 0.5, 0.5 ]); 

    var brushScale = d3.scale.linear() 
      .domain([0,2]) 
      .range([0, width]); 

    // Histogram Y-Axis linear scale 
    var y = d3.scale.linear() 
      .domain([0, d3.max(byScrGrp.all(), function(d){ return d.value; })]) 
      .range([height/2, 0]); 

    // SVG Brush control object 
    var brush = d3.svg.brush() 
      .x(brushScale) 
      .on("brushstart", brushstart) 
      .on("brush", brushmove) 
      .on("brushend", brushend) 

    // Histogram SVG containiner  
    var svg = d3.select("#histogram").append("svg:svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height/2 + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     // Histogram bars 
     svg.selectAll("rect") 
      .data(byScrGrp.all()) 
      .enter().append("rect") 
      .attr("x", function(d,i){ return i * (width/byScrGrp.size()); }) 
      .attr("width", width/byScrGrp.size() - barPadding) 
      .attr("y", function(d){ return y(d.value) ; }) 
      .attr("height", function(d){ return ((height/2) -y(d.value)); }) 
      .attr("fill", function(d){ return color(d.key); })   .on("mouseover", function(d){ d3.select(this).attr("fill", "teal"); console.log(d.key); }) 
      .on("mouseout", function(d) { d3.select(this).attr("fill", function(d){return color(d.key);}) }); 


    // Histogram X Axis Object 
    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10); 
     // X Axis 
     svg.append("g") 
      .attr("class", "axis") 
      .call(xAxis) 
      .attr("transform", "translate(0, " + height/2 + ")") ; 
     // X Axis Label 
     svg.append("text") 
      .attr("transform", "translate(" + (width/2) + " ," + (height/2 + margin.bottom) + ")") 
      .attr("text-anchor", "middle") 
      .text("MSPB Score"); 

    // Histogram Y Axis Object 
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10); 
     // Add Y Axis 
     svg.append("g") 
      .attr("class", "axis") 
      .call(yAxis) 
      .attr("transform", "translate(" + margin.left + ",0)"); 
     // Add Y Axis Label 
     svg.append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 0 - 10) 
      .attr("x", 0 - (height/4)) 
      .attr("text-anchor", "middle") 
      .text("Number of Hospitals"); 


var brushg = svg.append("g") 
      .attr("class", "brush") 
      .call(brush) 

    brushg.select('.background') 
       .attr('width', width); 

    brushg.selectAll("rect") 
       .attr("height", height/2); 


function brushstart() { 
    svg.classed("selecting", true); 
} 

function brushmove() { 
    var s = brush.extent(); 
    brushg.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; }); 
} 

function brushend() { 
     if (!d3.event.sourceEvent) return; 
     d3.select(this).transition() 
      .call(brush.extent(brush.extent().map(function(d){return d3.round(d,2); }))); 

     var extent = brush.extent(); console.log(extent); 
} 


    }

來源

2015-05-20 Colin

你可能想爲這個問題做一個jsfiddle。 –

這是第一句話中的鏈接。但我編輯了一下，讓它更加明顯。謝謝！ – Colin

編輯它一點。事情的方式，看起來好像你可能一直鏈接到條形圖。看看你是否喜歡它。祝你好運。 –

我始終沒弄清楚到底發生了什麼怎麼回事，但醜陋的黑客是手工35 PX軸向左移動。

.attr("transform", "translate(-35" + height + ")");

從視覺上看，這是可以通過的，但並不真正感覺就像是對問題的解釋。

來源

2015-05-20 21:18:49 Colin

我有同樣的問題，所有這個解決方案不適合我。只是移動軸。 –

D3.js序數比例軸錯誤對齊

回答

相關問題