序号范围范围圆形带（）

我正在构建一个条形图，其中包含不同数量的数据点。我见过的所有例子都使用了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

序号范围范围圆形带（）

回答

相关问题