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只能读取您发送的数据中已有的值 - 您可以随时访问以前的值，因为每个数据都绑定到一个单独的元素。因此，您需要做的是创建一些新数据，其中包含显示它所需的所有数字。

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

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

单堆积条形图数据设置？

1 个答案: