4

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

左边的图像显示了我现在拥有的东西，右边的图像显示了它需要的东西：

当前图表 解决方案

我发现该功能可以堆叠多个区域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");
});

此外，所有低于零的值都应该是绿色的，但是当有上述问题的代码时，这可以很容易地扩展。

4

2 回答 2

3

这就是您可能正在寻找的内容：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找到更多相关信息。

于 2013-08-31T15:51:59.767 回答
1

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

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

于 2014-04-09T21:30:11.420 回答