D3JS條形圖：如何允許重複的x軸標籤值？

請看功能drawBarchart();

注：在我的例子中，當外部數據值被重命名並提出獨特的全4條顯示，但省略當值是一樣的，我知道這是預期的行爲，但我必須允許重複values.Please幫助..

代碼：

$(document).ready(function(){ 
    var dataArray = [ 
       { 
        "xData" : "Repeat", 
        "yData" : 38 
       }, 
       { 
        "xData" : "Unique", 
        "yData" : 27 
       }, 
       { 
        "xData" : "Repeat", 
        "yData" : 27 
       }, 
       { 
        "xData" : "Repeat", 
        "yData" : 29 
       } ]; 
drawBarchart("graph",dataArray,"count",700,400); 
} 
); 


function drawBarchart(containerId, dataArray, yAxisText, chartAreaWidth, 
     chartAreaHeight) { 
    var margin = { 
     top : 20, 
     right : 20, 
     bottom : 30, 
     left : 40 
    }, width = chartAreaWidth - margin.left - margin.right, height = chartAreaHeight 
      - margin.top - margin.bottom; 

    var formatPercent = d3.format(".0%"); 

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

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

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

    //var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent); 
    var yAxis = d3.svg.axis().scale(y).orient("left"); 

    var svg = d3.select("#" + containerId).append("svg").attr("width", 
      width + margin.left + margin.right).attr("height", 
      height + margin.top + margin.bottom).append("g").attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    x.domain(dataArray.map(function(d) { 
     return d.xData; 
    })); 
    y.domain([ 0, d3.max(dataArray, function(d) { 
     return d.yData; 
    }) ]); 

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

    svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr(
      "transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style(
      "text-anchor", "end").text(yAxisText); 

    svg.selectAll(".bar").data(dataArray).enter().append("rect") 
      .attr("class", "bar").attr("x", function(d) { 
       return x(d.xData); 
      }).attr("width", x.rangeBand()).attr("y", function(d) { 
       return y(d.yData); 
      }).attr("height", function(d) { 
       return height - y(d.yData); 
      }); 

    function type(d) { 
     d.yData = +d.yData; 
     return d; 
    } 
}

來源

2013-10-21 Lord

您可以通過不使用x軸的規模做到這一點。比例點是將輸入值映射到輸出，即相同的輸入會給你相同的輸出。鑑於這不是你想要的這種情況，你不需要一個規模。

可以計算基於所述數據內的索引的每個杆的位置：

.attr("x", function(d, i) { 
    return i * width/dataArray.length; 
})

每個條的寬度可以以類似的方式來計算。文字標籤的相同之處，您必須手動添加。完成jsfiddle here。

來源

2013-10-21 08:31:26

太棒了！非常感謝您的回答，但是現在第一個欄與y軸重疊，並且x軸的勾號也被刪除，進一步的幫助將不勝感激:) – Lord

您可以通過調整x位置來移動欄位，如上所述。您還必須手動繪製刻度線，即在適當的位置生成線段。 –

感謝您的幫助:) 雖然我設法改變了第一個bar.i m仍然堅持繪製X軸和X軸刻度。所以我現在沒有他們，以後再試。 – Lord

您必須在一個比例上使用唯一值，因爲它會「映射」這些值。不過，我們將修改滴答的文本，並讓圖表顯示它具有重複的值。

添加的x縮放比例定義以上下述（VAR X = ...）：

// Rewrite xData and prepend index -> xData: "Repeat0" 
dataArray = dataArray.map(function(d,i){d.xData = d.xData +i; return d}); 

// Remove the index from the ticks -> xData: "Repeat0" -> "Repeat" 
var adjustTicks = function(){ 
    var xaxisgroup = this.node(); 
    var ticks = xaxisgroup.children; 
    for (var i = 0; i < ticks.length; i++) { 
     if(ticks[i].localName == 'path'){continue; } 

     var tick_text = d3.select(ticks[i].children[1]); 
     tick_text.text(tick_text.text().substring(0, tick_text.text().length - 1)) 

    }; 
}

然後,. 當你實際繪製規模調用調用方法傳遞adjustTicks作爲參數，就像這樣：

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

它能做什麼是使用唯一的值來創建規模，但替代刻度上的文本，似乎重複值正在使用。

來源

2015-09-01 23:43:53

D3JS條形圖：如何允許重複的x軸標籤值？

回答

相關問題