d3.js - 條形圖不會以比例顯示

我更新了我的代碼以使用D3中的比例尺方法。不過，從那時起我的條形圖將不會顯示。這個問題的原因是什麼？d3.js - 條形圖不會以比例顯示

var dataset = [ ]; 

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70); 
    dataset.push(newNumber);} 

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

    var widthScale = d3.scale.linear() 
        .domain([0,d3.max(dataset)]) 
        .range([0,w]); 

     svg.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", 3) 
      .attr("y", function (d,i) {return i* 36;}) 
      .attr("width", function(d) {return widthScale;}) 
      .attr("height", h/dataset.length - barPadding) 
      .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";});

來源

2013-10-09 Yansee

我沒有看到你設置X，Y尺度。 x應該是d3.scale.ordinal，y應該是d3.scale.linear。你有沒有試過從基本的條形圖模板開始？ http://vida.io/documents/HzRf7K4Cb3LP73fjs –

我能夠通過將.attr（「width」，function（d）{return widthScale;}）更改爲.attr（「width」，widthScale）來修復它。謝謝。 @PhucDo – Yansee

甲D3刻度僅僅是一個函數轉換從一個給定的輸入域值（你的數據值，0到最大）到指定的輸出範圍（圖表的寬度）。因此，您必須將比例應用於您的數據，例如widthScale(d)。現在您將widthScale函數分配給rect的width屬性，而不是輸出值。

見工作小提琴：http://jsfiddle.net/S92u4/

來源

2013-10-09 07:05:01 prayerslayer

d3.js - 條形圖不會以比例顯示

回答

相關問題