Question

我的酒吧应该在背景中交替，类似于这个jsFiddle：fiddle。这就是它最终的结果：picture。

这是应该做的技巧的代码（但不是）：

svg.selectAll("g.grid")
    .data(y.ticks()).enter()
    .append("g").attr("class", "grid")
    .select("rect")
        .data(x.ticks())
        .enter()
        .append("rect")
        .attr("y", function(d, i, j) {
                return yScale(i);
        })
        .attr("width", width)
        .attr("height", (yScale.rangeBand()))
        .attr("fill", function(d, i) {
            return ((i) % 2) == 1 ? "white" : "lightgrey";
        });

这是我与之合作的完整代码：code

代码的小提琴here。

Answer 1

除了你的y有错误的元素外，你把一切都搞好了

Answer 2

我最终使用已经在我的代码中的网格线作为矩形的基线。这是使网格线工作的代码：

function make_y_axis() {        // function for the y grid2 lines
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5)
}

以下是他们的名字：

svg.append("g")      // Draw the y grid2 lines
    .attr("class", "grid2")
    .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat("")
    );

这会创建我的网格，在CSS顶部，我擦除线条，所以它们在那里，但是无法看到。

.grid2 .tick {
    stroke: none;               
}

几乎完成它，我实际上添加了这样的矩形：

svg.selectAll(".grid2")
    .selectAll(".tick")
        .append("rect")
        .attr("width", width)
        .attr("height", maxY - 4.03)
        .attr("class", function(d, i) {
            return ((i) % 2) == 1 ? "zebraGrey" : "zebraNone";
        })
        .attr("stroke", "none");

添加样式：

.zebraNone {
    opacity: 0;
}
.zebraGrey {
    background-color: #000;
    opacity: 0.05;
}

就是这样。

调试错误地显示条

2 个答案: