Question

我的程序中有一个条形图，但它似乎没有正确显示。所有的酒吧看起来都比他们想象的要大很多。这是相关代码：

//Bar Graph

var canvas = d3.select("#canvas");
canvas.width = 500;
canvas.height = 500;
var values = [1, 2, 3]

var colours = ['#FA0', '#0AF', '#AF0']

var data = []

var yOffset = 0

//create scale
yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top,
MARGINS.bottom]).domain([0, 6]);

//Process the data

for (var i = 0; i < values.length; i++) {

    var datum = {

        value: yRange2(values[i]),
        colour: colours[i],
        x: 0,
        y: yOffset

    }

    yOffset += datum.value;

    data.push(datum)

}

//setup y
yAxis2 = d3.svg.axis()
    .scale(yRange2)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);

canvas.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis2);

var bars = canvas.selectAll('rect').data(data)

bars
    .enter()
    .append('rect')
    .attr({
        width: 30,
        x: 60,
        y: function (d) {
            return d.y
        },
        height: function (d) {
            return d.value;
        }

    })
    .style({
        fill: function (d) {
            return d.colour
        }
    })

//updates when slider changes
$("#myRange").change(function () {
    slider = $("#myRange").val();

    updateXs();
    updateLineData();
    displayVals();

    d3.select(".myLine").transition()
        .attr("d", lineFunc(lineData));
});

这里是完整的代码： http://jsfiddle.net/tqj5maza/7/

对我而言，看起来酒吧出于某种原因从顶部开始，然后向下，因此截止。但是，每个人的身高似乎都太大了。

Answer 1

您没有正确设置rects高度属性。 Generally这是绘图区域的高度减去y位置。您的代码构建方式如下：

height: function (d) {
    return canvas.height - MARGINS.top - d.value;
}

要修复重叠的x值，您应该设置一个x d3.scale，但是快速而肮脏的方式是：

x: function(d,i){
    return (i + 1) * 60; //<-- move each bar over 60 pixels
}

更新了代码here。

D3.js条形图无法正常显示？

1 个答案: