Question

我正在尝试制作一个D3堆叠条形图，每个类别有3个堆叠条形图。看起来我的数据正确映射，因此每个数字都有一个x，y和y0，但由于某种原因，条形高度非常大。你可以在我的小提琴里看到：http://jsfiddle.net/RL_NewtoJS/MjD5S/3/

此处还有制作图表的代码：

var marginTop = 10;
var marginBottom = 20;
var marginRight = 10;
var marginLeft = 20;
var height = 300 - marginTop - marginBottom;
var width = 170 - marginLeft - marginRight;
var parseDate = d3.time.format("%m/%Y").parse;

var svgSelection = d3.select('#chart1')
    .append("svg")
    .attr("width", width + marginLeft + marginRight)
    .attr("height", height + marginTop + marginBottom);

var baseGroup = svgSelection
    .append("g")
    .attr("transform", "translate("+marginLeft+","+marginTop+")");


var yScaleBar = d3.scale.linear()
    .range([height,0]); 

var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .0);

var colorScale = d3.scale.ordinal()
    .range(["darkblue", "blue", "lightblue"])


var yAxisBar = d3.svg.axis()
    .scale(yScaleBar)
    .tickSize(-width, 0, 0)
    .orient("left");        

var xBarAxis = d3.svg.axis()
    .scale(xBarScale)
    .ticks(4)
    .orient("bottom");


var dataset = [
    { apples: 5, oranges: 10, grapes: 22 },
    { apples: 4, oranges: 12, grapes: 28 },
    { apples: 2, oranges: 19, grapes: 32 },
    { apples: 7, oranges: 23, grapes: 35 },
    { apples: 23, oranges: 17, grapes: 43 }
];

// each key (fruit), uses a map to create all the objects for that fruit
// i in the anonymous function passed to map is the index of the dataset array, so can be used as the ID
var newDataset = ["apples", "oranges", "grapes"].map(function(n){
    return dataset.map(function(d, i){
           return { x: i, y: d[n] };
       });
});

d3.layout.stack()(newDataset);



yScaleBar.domain([0, d3.max(newDataset[newDataset.length - 1], function(d) { return d.y0 + d.y; })]);
xBarScale.domain(d3.range(dataset.length));


 // Add a group for each fruit
 var valgroup = baseGroup.selectAll("g.valgroup")
        .data(newDataset)
        .enter()
        .append("g")
        .attr("class", "valgroup")
        .style("fill", function(d, i) { return colorScale(i); });


baseGroup.append("g")
      .attr("class", "xaxis")
      .attr("transform", "translate(0," + height + ")")
      .call(xBarAxis);            


baseGroup.append("g")
      .attr("class", "yaxis")
      .call(yAxisBar); 


 // Add a rect for each date.
 var rect = valgroup.selectAll("rect")
        .data(Object)
        .enter()
        .append("rect")
        .attr("x", function(d) { return xBarScale(d.x); })
        .attr("y", function(d) { return yScaleBar(d.y0) - yScaleBar(d.y); })
        .attr("height", function(d) { return yScaleBar(d.y); })
        .attr("width", xBarScale.rangeBand());

Answer 1

您的代码中只有轻微的错误估算：您只需要替换矩形坐标/高度计算，如下所示：

var rect = valgroup.selectAll("rect")
            .data(Object)
            .enter()
            .append("rect")
            .attr("x", function(d) { return xBarScale(d.x); })
            .attr("y", function(d) { return yScaleBar(d.y + d.y0); })
            .attr("height", function(d) { return (height - yScaleBar(d.y)); })
            .attr("width", xBarScale.rangeBand());

我已经设置了一个小提琴供参考：http://jsfiddle.net/prashant_11235/QEjHb/

请注意，只需要修改y坐标和高度函数。

D3：堆积条形图 - 高度对于酒吧来说太大了

1 个答案: