javascript - 有条件地在d3.js中填写面积图

我有一个面积图(假定代表一个时间序列)。我想基于y值对图形着色，以便对于y> c的区域是一种颜色，对于y
这是我生成单个颜色图的代码:

var width = 700,
    height = 400;

var vis = d3.select("#chart")
    .append("svg")
    .attr("width",width)
    .attr("height",height);

var mpts = [{"x":0,"val":15}];
var n = 200;
for(var i=0;i<n;i++)
{
    if(Math.random()>.5)
    {
        mpts = mpts.concat({"x":i+1,"val":mpts[i].val*(1.01)});
    }
    else
    {
        mpts = mpts.concat({"x":i+1,"val":mpts[i].val*(.99)});
    }
}

var x = d3.scale.linear().domain([0,n]).range([10,10+width]);
var y = d3.scale.linear().domain([10,20]).range([height-10,0]);

var area = d3.svg.area()
        .interpolate("linear")
        .x(function(d) { return x(d.x); })
        .y1(function(d) { return y(d.val); })
        .y0(function(d) { return y(0); });

vis.append("svg:path")
            .attr("class", "area")
            .attr("d",area(mpts))
        .attr("fill","orange");

</script>

最佳答案

更改将区域添加到类似的方式

    vis.selectAll("path").data(mpts).enter().append("svg:path")
        .attr("class", "area")
        .attr("d", area)
        .attr("fill", function(d) { return (d.val > c ? "orange" : "yellow"); });

关于javascript - 有条件地在d3.js中填写面积图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11854445/