D3順序量表添加數字到年底

Question

我創造一個有序的規模，像這樣：

var x = d3.scale.ordinal() 
      .domain(["b1", "b2", "b3", "b4", "b5"]) 
      .rangeBands([0, width], .1); 

如果我用這個規模與軸：

var xaxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

svg.append("g") 
    .attr("class", "axis") 
    .call(xaxis) 
    .attr("transform", "translate(" + 0 + "," + height + ")"); 

我發現當軸在5條線條的條形圖中呈現，最後在數字上顯示。所以，我得到：

b1,b2,b3,b4,b5,0,1,2,3,4.

而且該酒吧未對齊的蜱。

如何使軸的行爲，使我得到下5條？

這裏就是整個功能：

function barchart_2d_array(width, height, barwidth, data, target_div){ 


    var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
     w = width + margin.left + margin.right, 
     h = height + margin.top + margin.bottom; 



    var dataset = data; 

    values_arr=[]; 

    for(var o in dataset){ 
     values_arr.push(dataset[o]); 
    } 

    var x = d3.scale.ordinal() 
        .rangeBands([0, width], .1); 



    var y = d3.scale.linear() 
        .domain([0,d3.max(values_arr)]) 
        .range([height,0]); 



    var svg = d3.select(target_div) 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h) 
       .attr("style","border : 1px solid black") 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    x.domain(["b1", "b2", "b3", "b4", "b5"]); 

    window.x=x; 
    window.width=width; 

    svg.selectAll("rect") 
     .data(values_arr) 
     .enter() 
     .append("rect") 
     .attr("x",function(d,i){ 
      return x(i); 
     }) 
     .attr("y",function(d,i){ 
      return y(d); 
     }) 
     .attr("width",barwidth) 
     .attr("height",function(d,i){ 
      return height - y(d); 
     }); 

    var yaxis = d3.svg.axis() 
         .scale(y) 
         .orient("left") 
         .ticks(5); 

    var xaxis = d3.svg.axis() 
         .scale(x) 
         .orient("bottom"); 

    svg.append("g") 
     .attr("class", "axis") 
     .call(yaxis); 

    svg.append("g") 
     .attr("class", "axis") 
     .call(xaxis) 
     .attr("transform", "translate(" + 0 + "," + height + ")"); 

}; 

這是我怎麼稱呼它：如果他們以前沒有見過

<div id="bar_chart"> 

</div> 
<script> 
    var dataset = { "b1":100, "b2":200, "b3":300, "b4":400, "b5":500 }; 

    a = barchart_2d_array(400,200, 5,dataset,"#bar_chart"); 

</script> 

Answer 1

D3的順序尺度將隱式添加值到域。你的代碼是傳遞你在這個功能看到其他值：

.attr("x",function(d,i){ 
    return x(i); 
}) 

i是在選擇的節點開始指數爲0。

你應該再看看數據集你是有約束力的，因爲我認爲它沒有做你想做的事。您將數據對象轉換爲數組，但在此過程中您將刪除屬性名稱。您的數組只包含值（[100, 200, 300, 400, 500]），而不包括x規模期望的條形圖名稱。

你可能希望你的陣列看起來更像[{name: b1, value: 100}, {name: b2, value: 200}...]，然後你可以擴展的數據x和y這樣的：一旦你綁定的數據別人的權利都應該落入的形狀

.attr("x",function(d) { 
    return x(d.name); 
}) 
.attr("y",function(d) { 
    return y(d.value); 
}) 

地點。