在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ d3 如何創(chuàng)建不同顏色的堆棧圖

d3 如何創(chuàng)建不同顏色的堆棧圖

想要的效果是這樣的：

圖片描述

使用d3的堆棧柱狀圖（stacked bar chart）來實現(xiàn)，但是得到的結(jié)果卻是：

圖片描述

兩個不同柱的顏色是一樣的，代碼可以看這里。問題就是，我要怎樣才能創(chuàng)建出我想要的那種，每個柱的顏色不同的柱狀圖 ？ 謝謝啦~

回答
編輯回答
半心人

確實如 @Randal 所說的思路，使用一個一個函數(shù)來生成fill的值，比如上面的例子，我們作如下修改，就可以實現(xiàn)不同柱不同顏色了：

var layer = svg.selectAll(".stack")
            .data(dataStackLayout)
            .enter().append("g")
            .attr("class", "stack")
            
            // 注釋掉下面代碼
            /* .style("fill", function (d, i) {
                return color(i);
            }); */

    layer.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter().append("rect")
            .attr("x", function (d) {
                return x(d.x);
            })
            .attr("y", function (d) {
                return y(d.y + d.y0);
            })
            .attr("height", function (d) {
                return y(d.y0) - y(d.y + d.y0);
            })
            .attr("width", x.rangeBand())
            
            // 增加下面代碼
            .style("fill", function (d, i, j) {  // 三個參數(shù)分別是：d 數(shù)據(jù)，i 當前rect的序號，j 當前rect 的父元素的序號
               return color((j * 2) + i);
            });
2017年10月28日 08:54
編輯回答
使勁操
.attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

來自：https://stackoverflow.com/que...

2018年2月27日 16:03