Question

我是d3库的新手我发现这个堆积条形图我想自定义它以使用它

http://codepen.io/benlister/pen/bNeLQy 这就是我想要定制的两行

    .attr("y", function (d) {return y(d.y1);})
    .attr("height", function (d) {return y(d.y0) - y(d.y1);})

我试图自定义它的高度，但它不适合我

我希望左轴的实际数字不是百分比
我希望高度与每个高度不同，具体取决于它的总值

Answer 1

在

d.y0 /= y0;;
d.y1 /= y0;;

您将d.y0和d.y1与y0分开（在这种情况下，它是所有费率的总和，而您获得百分比。所以第1步是删除它（删除这两个）行）。

步骤2是删除y轴的'％-format。所以改变

var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%"));

到

var yAxis = d3.svg.axis().scale(y).orient("left");

最后，您必须将y的域设置为[0,yMax]而不是[0,1]，这可以通过将data.forEach更新为（非最佳方式）来完成

var maxY = 0;
    data.forEach(function (d) {
        var y0 = 0;

        d.rates = color.domain().map(function (name) {
            console.log();;
            return {
                name: name,
                y0: y0,
                y1: y0 += +d[name],
                amount: d[name]
            };
        });
        d.rates.forEach(function (d) {
            //d.y0 /= y0;
            //d.y1 /= y0;
        });
   maxY = Math.max(y0,maxY);
        console.log(data);
    });
 y.domain([0,maxY]);

请参阅http://codepen.io/anon/pen/JRkjGE

如何使用d3自定义此叠加条形图

1 个答案: