Question

在工作中，一个不再可用的人制作了一个带有D3.js图表的应用程序，它还没有完成，我必须完成它。但是我不是，我仍然不熟悉D3.js库，我可以解决一些问题。但有一件事我无法解决，我有一个带有彩色区域的图形，工作和看起来很好，如果超过一个值，必须显示红色图形而不是黄色。在这种情况下，值为-30，因此在红线上方（见图片）。

左边的图像显示了我现在所拥有的，右边的图像显示了它需要的内容：

Current graph The solution

我发现可以使用d3.layout.stack()功能堆叠多个区域。但我只找到使用硬编码JSON或多个图形的代码的示例下面的代码就是我现在拥有的代码:(我删除了无关紧要的内容）

var area = d3.svg.area()
    .interpolate("basis") 
    .x(function (d) {return x(d.date); })
    .y0(function (d) {return y(0); })
    .y1(function (d) {return y(d.energy); });
var svg = d3.select("#datacontainer2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);
var context = svg.append("g").attr("transform","translate("+margin2.left+","+margin2.top + ")");

d3.csv("file:///data.txt", function (error, data) {
    data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.energy = d.energy; 
    });

    x.domain(d3.extent(data.map(function (d) { return d.date; })));
    y.domain([25, -50] /*d3.extent(data.map(function(d) { return d.energy; }))*/ );
    x2.domain(x.domain());
    y2.domain(y.domain());

    focus.append("path")
        .datum(data)
        .attr("clip-path", "url(#clip)")
        .attr("d", area);

    // red line
    focus.append("svg:line")
        .attr("x1", 0)
        .attr("x2", height * data.length)
        .attr("y1", (function (d) { return y(-30); } ))
        .attr("y2", (function (d) { return y(-30); }))
        .attr("stroke", "#ff0000")
        .attr("stroke-width", "3");
});

此外，所有零以下的值都应该是绿色，但是在获得上述问题的代码时可以轻松扩展。

Answer 1

您可能正在寻找：http://jsfiddle.net/h45CD/。

Create a area gradient and color according to that.
// Set the threshold
    svg.append("linearGradient")                    
        .attr("id", "area-gradient")                // change from line to area
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", y(0))             
        .attr("x2", 0).attr("y2", y(1000))          
    .selectAll("stop")                              
        .data([                                     
            {offset: "0%", color: "red"},           
            {offset: "30%", color: "red"},      
            {offset: "45%", color: "black"},        
            {offset: "55%", color: "black"},    
            {offset: "60%", color: "lawngreen"},    
            {offset: "100%", color: "lawngreen"}    
        ])                                          
    .enter().append("stop")                         
        .attr("offset", function(d) { return d.offset; })       
        .attr("stop-color", function(d) { return d.color; });

有关详情，请访问d3noob。

Answer 2

这是一个老问题，但如果它能帮助任何偶然发现这个问题的人，我遇到了类似的问题。我讨厌渐变的视觉方式，所以我寻找一个替代的答案。不同的，在我看来，迈克本人可以使用这个例子采用更清洁的方法。

http://bl.ocks.org/mbostock/4062844

D3.js堆叠区域，颜色变化高于特定值

2 个答案: