Question

我正在尝试创建类似于此http://bl.ocks.org/mbostock/3894205

的D3差分图表

我从示例中逐字记录了大部分D3和CSS3代码，并在用户检查特定复选框时获取了相关的线条和颜色区域。但是，我的编码问题在于分割线上方和下方的区域使用相同的颜色突出显示，而不是CSS代码中定义的差异颜色。

相关的CSS如下：

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis path {
    /*  display: none;*/
    display: inline;
}

.area.above {
    fill: rgb(252,141,89);
    opacity:0.5;
}

.area.below {
    fill: rgb(145,207,96);
    opacity:0.5;
}

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
}

使用相关的D3代码并根据上面的示例进行调整，以下是：

dvc.line = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return main_x0(d.date); })
    .y(function(d) { return dvc.y(d[prelimLineArray]); });

dvc.area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) {return main_x0(d.date)})
    .y1(function(d) { return dvc.y(d[prelimLineArray]); }); 

dvc.focus.datum(dvc.data);

dvc.focus.append("clipPath")
    .attr("id", "clip-below")
    .append("path")
    .attr("stroke-width", "1px")
    .attr("d", dvc.area.y0(dvc.height));

dvc.focus.append("clipPath")
    .attr("id", "clip-above")
    .attr("stroke-width", "1px")
    .append("path")
    .attr("d", dvc.area.y0(0));

dvc.focus.append("path")
    .attr("class", "area above")
    .attr("clip-path", "url(#clip-above)")
    .attr("d", dvc.area.y0(function(d) {
    return dvc.y(d[selectedLineArray]);
}));

dvc.focus.append("path")
    .attr("class", "area below")
    .attr("clip-path", "url(#clip-below)")
    .attr("stroke-width", "1px")
    .attr("d", dvc.area);

可以帮助我并发现此代码中的任何错误会导致只有一个CSS高亮颜色用于正面和负面的图形区域吗？

由于

D3差分图表：未显示正/负颜色

0 个答案: