d3堆叠条形图在绘制多个条形图时出现条纹

Question

我已经构建了一个堆叠的条形图，大约有700条。一切正常，但我真的对绘制图表时出现的条纹感到沮丧。下面是默认视图和缩放视图的屏幕截图。

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())