gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 03:55:13 24 4
gpt4 key购买 nike

我有一个面积图(应该代表一个时间序列)。我想根据 y 值给图形上色,这样对于 y > c 的区域它是一种颜色,对于 y<=c 的区域它是另一种颜色。这在 D3 中可能吗?

这是我生成单色图的代码:

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com