Javascript 如何使用不同的颜色为散点图下的区域着色

我是这个论坛的新手，感谢所有能给我的帮助

我试着用不同的颜色在图形下的阴影区域上搜索了很多，但由于某些原因，我的代码无法使用它。所以我不得不删除这段代码

我想根据我的数据使用颜色对散点图下的区域进行着色（例如：0到2：红色；2到5：蓝色；>5：绿色）。我发现了一个以垂直方式应用渐变的代码，但我希望颜色在图形中水平显示

以下是我的javascript代码：

var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

//var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.scale.linear()
.range([0, width]);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var area = d3.svg.area()
.x(function(d) { return x(d.time); })
.y0(height)
.y1(function(d) { return y(d.conc); });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
  .append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function make_x_axis() {        
return d3.svg.axis()
    .scale(x)
     .orient("bottom")
     .ticks(20)

function make_y_axis() {        
return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(20)

// load data
d3.json("convertcsv.json", function(data) {
data.forEach(function(d) {
 d.conc = +d.conc;
d.time = +d.time;
  });

x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain([0, d3.max(data, function(d) { return d.conc; })]);

svg.append("area-gradient")
  .attr("id", "temperature-gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .attr("x1", 0).attr("y1", y(50))
  .attr("x2", 0).attr("y2", y(60))
.selectAll("stop")
  .data([
    {offset: "0%", color: "steelblue"},
    {offset: "50%", color: "gray"},
    {offset: "100%", color: "red"}
  ])

svg.append("path")
  .datum(data)
  .attr("class", "area")
  .attr("d", area)
.style("fill", function(d) {            
        if (d.conc >= 5 ) {return "#00CC00"}  
        else if (d.conc < 5 && d.conc >= 2 )   { return "#0000CC" }  
       else     { return "#00CC00"}     
    ;})                                     

svg.selectAll("dot")
    .data(data)
.enter().append("circle")
    .attr("r", 10)
    .style("fill", function(d) {            // <== Add these
        if (d.conc >= 5 ) {return "#00CC00"}  // <== Add these
        else if (d.conc < 5 && d.conc >= 2 )   { return "#0000CC" }  
       else     { return "#CC0000"}     // <== Add these
    ;})                                     // <== Add these
    .attr("cx", function(d) { return x(d.time); })
    .attr("cy", function(d) { return y(d.conc); })
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(d.conc + "%")  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });

var div = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

 svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Concentration");


svg.append("g")         
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat("")
    )

svg.append("g")         
    .attr("class", "grid")
    .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat("")
    )

});

var margin={top:20，right:20，bottom:30，left:50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//var parseDate=d3.time.format（“%d-%b-%y”）.parse；
var x=d3.scale.linear（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var area=d3.svg.area（）
.x（函数（d）{返回x（d.time）；}）
.y0（高度）
.y1（函数（d）{返回y（d.conc）；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
函数make_x_axis（）{
返回d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（20）
函数make_y_axis（）{
返回d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（20）
//加载数据
d3.json（“convertsv.json”），函数（数据）{
data.forEach（函数（d）{
d、 conc=+d.conc；
d、 时间=+d时间；
});
x、 域（d3.extent（数据，函数（d）{返回d.time；}））；
y、 域（[0，d3.max（数据，函数（d）{return d.conc；}）]）；
svg.append（“面积梯度”）
.attr（“id”，“温度梯度”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，0）.attr（“y1”，y（50））
.attr（“x2”，0）.attr（“y2”，y（60））
.选择全部（“停止”）
.数据([
{偏移量：“0%”，颜色：“钢蓝”}，
{偏移量：“50%”，颜色：“灰色”}，
{偏移量：“100%”，颜色：“红色”}
])
追加（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域）
.style（“填充”，函数（d）{
如果（d.conc>=5）{return“#00CC00”}
如果（d.conc<5&&d.conc>=2）{return“#0000CC}
else{return“#00CC00”}
;})                                     
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，10）
.style（“fill”，函数（d）{/=5）{return“#00CC00”}/=2）{return“#0000CC”}
else{return“#CC0000”}//您可以在多个方向上定义渐变，甚至可以使用CSS定义每个停止点的颜色。最好在SVG元素的
defs
标记下定义渐变。线性渐变的方向由属性
x1
、
y1
、
x2
和
y2
给出。例如，如果有<代码> x1＝0 < /COD>，<代码> y1＝1 < /COD>，<代码> x2＝1 < /代码>和<代码> y2＝1 < /代码>，斜率将为对角线，从左上角到右下角。
var div = d3.select('#svg-container'),
    svg = div.append('svg');

svg.attr('width', width).attr('height', height);

// Create the svg:defs element and the main gradient definition.
var svgDefs = svg.append('defs');

// Define the gradient from (0, 0) to (1, 0) (horizontal)
var mainGradient = svgDefs.append('linearGradient')
    .attr('id', 'mainGradient')
    .attr('x1', 0).attr('y1', 1)
    .attr('x2', 0).attr('y2', 0);

// Create the stops of the main gradient. Each stop will be assigned
// a class to style the stop using CSS.
mainGradient.append('stop')
    .attr('class', 'stop-left')
    .attr('offset', '0%');

mainGradient.append('stop')
    .attr('class', 'stop-right')
    .attr('offset', '100%');

// Use the gradient to set the shape fill, via CSS.
svg.append('rect')
    .classed('filled', true)
    .attr('x', padding)
    .attr('y', padding)
    .attr('width', (width / 2) - 1.5 * padding)
    .attr('height', height - 2 * padding);

另外，您不需要在JavaScripts中设置停止颜色，您可以使用CSS配置它们

<style>
    .stop-left {
        stop-color: #3f51b5;  /* Indigo */
    }
    .stop-right {
        stop-color: #009688;  /* Teal */
    }
    .filled { fill: url(#mainGradient); }
</style>


1.向左停车{
停止颜色：#3f51b5；/*靛蓝*/
}
.向右停车{
停止颜色：#009688；/*青色*/
}
.filled{fill:url（#main梯度）；}

结果是：


此示例的完整代码可以在MDN站点的元素中找到。更多详细信息。关于，
感谢您提供的代码。但是，它对我仍然不起作用。我尝试更改代码以满足我的需要，但折线图的圆和轴消失了，只留下区域（没有渐变）.有没有方法可以指定要显示的颜色的数据范围？我尝试更改x1、y1和x2、y2的坐标以改变方向水平方向，但最终只能使用垂直渐变。我是否可以知道要获得水平方向必须使用什么坐标？我尝试过“（x1'，0）（'y1'，1）（'x2'，0）（'y2'，0）但出于某种原因，它只用一种颜色填充我的区域。我的区域是指数曲线下的区域。你认为这可能是原因吗？这里有一个工作示例，如果你发布一个工作小提琴，它会更容易提供帮助。我正要发布我能够使其水平。我只需要找到一种方法，根据n我的数组值。感谢大家的帮助：）