单堆叠条形图数据设置

Single Stacked Bar Graph Data Setup?

本文关键字：设置 数据 条形图 单堆叠      更新时间：2023-09-26

我试图在d3.js中为条形图制作一个奇异列，其目的是在我的程序中为其他线形图的系数绘制条形图。我很熟悉当数据是。csv格式时它们是如何制作的，但在这种情况下，现在我试图从三个变量中制作它。这三个变量是:

  var xtwo;
  var xone;
  var xzero;

，它们的值在后面的部分输入。我已经根据我所知道和看到的建立了一个框架，就在这里:

       //Bar Graph
        var barmargin = {
                top: 20,
                right: 20,
                bottom: 30,
                left: 60
            },
            barwidth = 500 - barmargin.left - barmargin.right,
            barheight = 350 - barmargin.top - barmargin.bottom;
        //X scale
        var barx = d3.scale.ordinal()
            .rangeRoundBands([0, barwidth], .1);
        //Y scale
        var bary = d3.scale.linear()
            .rangeRound([barheight, 0]);

        //bar graph colors
        var color = d3.scale.ordinal()
            .range(["#FF5C33", "#F48C00", "#FFFF5C"]);
        // Use X scale to set a bottom axis
        var barxAxis = d3.svg.axis()
            .scale(barx)
            .orient("bottom");
        // Same for y
        var baryAxis = d3.svg.axis()
            .scale(bary)
            .orient("left")
            .tickFormat(d3.format(".2s"));
        // Addchart to the #chart div
        var svg = d3.select("#chart").append("svg")
            .attr("width", barwidth + barmargin.left + barmargin.right)
            .attr("height", barheight + barmargin.top + barmargin.bottom)
            .append("g")
            .attr("transform", "translate(" + barmargin.left + "," + barmargin.top + ")");

        //Where data sorting happens normally
        var bardata.data([xzero, xone, xtwo]);

        //Y domain is from zero to 5
        y.domain([0, 5]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + barheight + ")")
            .call(barxAxis);
        svg.append("g")
            .attr("class", "y axis")
            .call(baryAxis);
        bardata.selectAll("rect")
            .data(function(d) {
                return d.types;
            })
            .enter().append("rect")
            .attr("width", barx.rangeBand())
            .attr("y", function(d) {
                return bary(d.y1);
            })
            .attr("height", function(d) {
                return bary(d.y0) - bary(d.y1);
            })
            .style("fill", function(d) {
                return color(d.name);
            });

但我真的不知道如何使它正确工作。我以为我可以手动制作。data，但它似乎不工作的方式。

完整代码:https://jsfiddle.net/tqj5maza/1/

一般来说:你想创建三个条，坐在彼此的顶部，从三个不同的值。这三个值将足以缩放条形图，但它们本身不足以定位条形图——每个条形图都需要被之前的条形图的大小所抵消。

d3只能读取你发送给它的数据中已经存在的值——你不能真正访问之前的值，因为每个数据都绑定到一个单独的元素。因此，您需要做的是创建一些新数据，其中包含显示它所需的所有数字。

你可以这样做:

var canvas = d3.select("#canvas").append("svg").attr({width: 400, height: 400})
var values = [50, 90, 30]
var colours = ['#FA0', '#0AF', '#AF0']
var data = []
var yOffset = 0
//Process the data
for(var i = 0; i < values.length; i++) {
    var datum = {
        value : values[i],
        colour : colours[i],
        x: 0,
        y: yOffset
    }
    yOffset += values[i] 
    data.push(datum)
}
var bars = canvas.selectAll('rect').data(data)
bars
    .enter()
    .append('rect')
    .attr({
        width : 30,
        height : function(d) {
            return d.value
        },
        y : function(d) {
            return d.y  // 
        }
    })
    .style({
        fill : function(d) {
            return d.colour
        }
    })
http://jsfiddle.net/r3sazt7m/

d3的布局函数都或多或少地做到了这一点——你传递给它们一组数据，它们返回包含SVG绘图指令所需值的新数据。

相关文章：