javascript - 序数标度的rangeRoundBands()

我正在构建一个条形图，其中将包含不同数量的数据点。我见过的所有示例都使用x轴的序数标度，然后调用rangeRoundBands()以获得条形图的宽度。

尝试调用.rangeRoundBands()时，出现错误“未捕获的TypeError：无法读取未定义的属性'1'”，据我所知，我已正确设置了缩放比例。

http://jsfiddle.net/rLzbbec0/1/

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()的错误。

最佳答案

ordinal.rangeRoundBands是配置设置器，您不能在没有参数的情况下调用它，因此在尝试访问第一个参数x[1]中的第二项x（从零开始索引）时，它会生成错误。您可以查看the source。

您可能想使用ordinal.rangeBand()代替，它：


  返回带宽。当使用rangeBands或rangeRoundBands配置比例尺的范围时，比例尺将返回给定输入的较低值。然后可以通过偏移带宽来计算上限值。如果使用range或rangePoints设置刻度的范围，则带宽为零。

关于javascript - 序数标度的rangeRoundBands()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26920199/