javascript - 单堆积条形图数据设置？

Question

我正在尝试在 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/

Answer 1

广义上讲:您想要根据三个不同的值创建三个柱状图，它们彼此重叠。这三个值足以缩放条形图，但它们本身不足以定位条形图 - 每个条形图都需要偏移之前已经消失的条形图的大小。

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

这是您可以这样做的一种方式:

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 绘图指令所需值的新数据。