序號範圍範圍圓形帶（）

我正在構建一個條形圖，其中包含不同數量的數據點。我見過的所有例子都使用了x軸的順序標度，然後調用rangeRoundBands()來獲得橫條的寬度。序號範圍範圍圓形帶（）

我收到錯誤「Uncaught TypeError：無法讀取未定義的屬性'1'當我嘗試調用.rangeRoundBands()時，並且據我所知我正在設置正確的比例。

var globOb = { 
bar: { 
    height: 390, 
    width: 675, 
    innerHeight: 300, 
    innerWidth: 615, 
    margin: { 
     bottom: 70, 
     left: 40, 
     right: 20, 
     top: 20 
    } 
}, 
barData: [ 
    { task: "meetingsTask", val: 2.5 }, 
    { task: "reportsTask", val: 3 }, 
    { task: "emailsTask", val: 2 }, 
    { task: "planningTask", val: 1.5 }, 
    { task: "clientsTask", val: 4 }, 
    { task: "dataAnalysisTask", val: 3 } 
]}; 

//Set X Scale 
var xScale = d3.scale.ordinal() 
    .rangeRoundBands([0, globOb.bar.innerWidth], .05, .1); 

xScale.domain(globOb.barData.map(function(d) { 
    return d.task 
})); 

//Set Y Scale 
var yScale = d3.scale.linear() 
    .domain([0, d3.max(globOb.barData, function(d) { 
     return d.val + 1 
    })]) 
    .range([globOb.bar.innerHeight, 0]); 


//Grab SVG and set dimensions 
var svg = d3.select("#viewport").append("svg") 
    .attr("width", globOb.bar.width) 
    .attr("height", globOb.bar.height); 

//Set the drawing area of the SVG 
var inner = svg.append("g") 
    .attr("transform", "translate(" + globOb.bar.margin.left + "," + 
     globOb.bar.margin.top + ")") 
    .attr("width", globOb.bar.innerWidth) 
    .attr("height", globOb.bar.innerHeight); 

//Setup Axes 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .innerTickSize(0) 
    .outerTickSize(-globOb.bar.innerHeight) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .innerTickSize(-globOb.bar.innerWidth) 
    .outerTickSize(-globOb.bar.innerWidth) 
    .orient("left"); 

//Add X Axis 
inner.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (globOb.bar.innerHeight) + ")") 
    .call(xAxis); 

//Add Y axis 
inner.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0,0)") 
    .call(yAxis); 


//draw data 
inner.selectAll("bar") 
    .data(globOb.barData) 
    .enter() 
    .append("rect") 
    .attr("class", function(d) { 
     return d.task.substring(0, d.task.length - 4) + "-bar" 
    }) 
    .attr("x", function(d) { 
     return xScale(d.task) 
    }) 
    .attr("width", 50) //xScale.rangeRoundBands()) 
    .attr("y", function(d) { 
     return yScale(d.val) 
    }) 
    .attr("height", function(d) { 
     return globOb.bar.innerHeight - yScale(d.val) 
    }); 

console.log(xScale.rangeRoundBands());

在撥弄我已經改變了rangeRoundBands()調用一組號碼，以顯示在圖表上畫，否則罰款。最後，我使用console.log()來顯示.rangeRoundBands()的錯誤。

來源

2014-11-13 user3226861

ordinal.rangeRoundBands是一個配置二傳手，你不能把它不帶參數，所以它試圖在第一個參數x訪問的第二個項目x[1]（從零索引）產生一個錯誤。你可以看看the source。

你可能想使用ordinal.rangeBand()代替，其中：

Returns the band width. When the scale’s range is configured with rangeBands or rangeRoundBands, the scale returns the lower value for the given input. The upper value can then be computed by offsetting by the band width. If the scale’s range is set using range or rangePoints, the band width is zero.

來源

2014-11-13 23:19:41 Oleg

序號範圍範圍圓形帶（）

回答

相關問題