Question

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

当我尝试调用.rangeRoundBands()时，我收到错误“Uncaught TypeError：无法读取未定义的属性'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()的错误。

Answer 1

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

您可能想要使用ordinal.rangeBand()，而不是：

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

序数量表范围的乐队带（）

1 个答案: