javascript - d3 堆积条形图在绘制许多条形时出现条纹

Question

我构建了一个包含大约 700 个条形的堆积条形图。一切都按其应有的方式运行，但我对绘制图表时出现的条纹感到非常沮丧。下面是默认 View 和缩放 View 的屏幕截图。

zoomed view to the left, default to the right

我怀疑条纹来自条形之间的填充。我已经篡改了条形宽度以尝试消除填充，但条纹仍然存在。目前条形宽度代码如下所示:

.attr("width",((width-(padding+xPadding))/data.length)+0.01)

“+0.01”会删除填充，如果我进一步将其增加到(例如 1)，条纹就会消失。然而，现在这些条明显地相互堆叠，这是我不希望的。我怀疑对此有一些快速修复(可能是 css 或其他微不足道的东西)，但我自己找不到它。那么，我该如何解决这个问题呢？

提前致谢。

编辑1:尝试按照评论中的建议使用刻度带，但对条纹没有影响。 same behaviour with scalebands

编辑2:添加了用于绘制矩形的相关代码。请注意，代码不会运行，代码片段仅用于查看代码。

d3.csv("vis_temp.csv", function(d, i, columns) {
                        for (i = 1, t = 0; i < columns.length-1; ++i){ //calculate total values. ignore last column(usecase) 
                                t += d[columns[i]] = +d[columns[i]];
                        }
                        d.total = t;
                        return d;
                        }, function(error,data){
                                if(error){
                                        console.log(error);
                                        return;
                                }
                                console.log(data);
                                dataset = data; // save data outside of d3.csv function
                                header = data.columns.slice(1); //prop1, prop2..... no sample
                                header.splice(header.length-1,1); //remove usecase from header
                                stack = d3.stack().keys(header);
                                maxValue = d3.max(data,function(d){
                                        return d.total;});
                                samples = data.map(function(d){
                                                return d.sample;});
                                
                                xScale = d3.scaleLinear()
                                        .domain([1,samples.length+1])
                                        .range([padding+1,width-xPadding]);
                        
                        /* using scalebands
                                xScale = d3.scaleBand()
                                        .domain(d3.range(data.length))
                                        .range([padding+1,width-xPadding]);
                        */
                                yScale = d3.scaleLinear()
                                        .domain([0,maxValue])
                                        .range([height-padding,padding]);

                                zScale = d3.scaleOrdinal()
                                        .domain(header)
                                        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); // low profile, stylish colors

                                xAxis = d3.axisBottom()
                                        .scale(xScale)
                                        .ticks(nbrOfXTicks);

                                yAxis = d3.axisLeft()
                                        .scale(yScale)
                                        .ticks(nbrOfYTicks);
                                        
                                                                        svg.append("text")
                                        .attr("class","chart_item")
                                        .attr("x",(width-padding-xPadding-20)/2)
                                        .attr("y",padding/2)
                                        .text("measurement");

                                svg.append("text")
                                        .attr("class","chart_item")
                                        .attr("x",padding/3)
                                        .attr("y",height/2)
                                        .attr("transform","rotate(270,"+padding/3+","+height/2+")")
                                        .text("Time [ms]")


                                svg.append("text")
                                        .attr("class","chart_item")
                                        .attr("x",(width-padding-xPadding)/2)
                                        .attr("y",height-7)
                                        .text("Sample");

                                svg.append("g")
                                        .attr("class","axis")
                                        .attr("id","x_axis")
                                        .attr("transform","translate(0,"+(height-padding)+")")
                                        .call(xAxis);

                                svg.append("g")
                                        .attr("class","axis")
                                        .attr("id","y_axis")
                                        .attr("transform","translate("+padding+",0)")
                                        .call(yAxis);

                                svg.append("g").attr("class","data");
svg.select(".data")
                                        .selectAll("g")
                                                .data(stack(data)) 
                                                .enter()
                                                .append("g")
                                                        .attr("class","data_entry")
                                                        .attr("id",function(d){
                                                                return d.key;})
                                                        .attr("fill",function(d){
                                                                return zScale(d.key);})
                                                .selectAll("rect")
                                                        .data(function(d,i){
                                                                return d;})
                                                        .enter()
                                                        .append("rect")
                                                        .attr("id",function(d){
                                                                return "bar_"+d.data.sample;})
                                                        .style("opacity",function(d){
                                                                return d.data.usecase=="E" ? val1 : val2;})//some bars opacity change
                                                        .attr("width",((width-(padding+xPadding))/data.length)+0.01)  // +0.01 to remove whitespace between bars 
                                                        //.attr("width",xScale.bandwidth()) use this with scalebands
                                                        .attr("height",function(d){
                                                                return (yScale(d[0])-(yScale(d[1])));
                                                                })
                                                        .attr("x",function(d){
                                                                return xScale(d.data.sample);})
                                                        .attr("y",function(d){
                                                                return yScale(d[1]);})
                                                        .on("mouseover",mouseover) //tooltip on mouseover
                                                        
                                
                                                        .on("mouseout", function() {
                                                                d3.select("#tooltip").classed("hidden", true);
                                                                });

Answer 1

当 x 轴使用序数刻度时，您可以在范围内设置条形填充。

例如:

var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeBands([0, width], 'padding');

常规的padding值约为0.1，但您可以设置为0，因为您不需要填充。

现在，您可以像这样设置宽度属性:.attr("width", xScale.rangeBand())