在2条路径之间绘制区域-编程知识-白鹭情

如图所示，

在 2 条路径之间绘制区域

我在一张图表中有 2 个图。我想填充红色和绿色路径之间的空间。我试过使用，d3.area()但我不知道如何正确使用它。

这是代码：

d3.csv("test.csv")

    .then(data => {
        console.log("Datos cargados correctamente");
        valor_Esp = [];
        valor_Ptg = [];

        color = {"Espa?a": "red", "Portugal": "green"};
        data.forEach( d => {
            if (d.Pais == 'Espa?a'){
                valor_Esp.push([d.A?o, d.Valor]);}
            else if (d.Pais == 'Portugal'){
                valor_Ptg.push([d.A?o, d.Valor])
            }
        })

        together = {"Espa?a": valor_Esp, "Portugal": valor_Ptg}
        console.log(valor_Ptg)
        margin = ({top: 40, right: 20, bottom: 40, left: 50});
        height = 500 - margin.top - margin.bottom;
        width = 600 - margin.left - margin.right;

        
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        
        
        x = d3.scaleTime()
            .domain([d3.min(data, d => d.A?o), 
                d3.max(data, d => d.A?o)]).nice()
            .range([margin.left, width - margin.right]);

        y = d3.scaleLinear()
            .domain([0,
                d3.max(data, d =>  d.Valor)]).nice()
            .range([height - margin.bottom, margin.top]);

        
        svg.append("g")
            .attr("transform", `translate(0, ${height - margin.bottom})`)
            .call(d3.axisBottom(x).tickFormat(d3.format("d")));
        svg.append("g")
            .attr("transform", `translate(${margin.left}, 0)`)
            .call(d3.axisLeft(y));
        
let curve = d3.curveCatmullRom.alpha(0.2)
                 let area = d3.area()
                 .x(function (d) { return x(d[0]) })
                 .y0(function (d) { return y(d[0]) })
                 .y1(function (d) { return y(d[0]) })
                 .curve(curve); 
        
        var line_esp = d3.line()
                .x(function(d){
                    return x(d[0]);
                })
                .y(function(d){
                    return y(d[1]);
                })
                .curve(curve);
                

        var line_ptg = d3.line()
                .x(function(d){
                    return x(d[0]);
                })
                .y(function(d){
                    return y(d[1]);
                })
                .curve(curve);
        

      
        
        var path_esp = svg.append("path")
            .attr("d", line_esp(valor_Esp))
            .attr("stroke", "steelblue")
            .attr("stroke-width", "3")
            .attr("fill", "none")
            .style("stroke", color['Espa?a'])
            
            .on("click", function(){
                alert("Hola");
            })
            .on("mouseover", function(d){
                d3.select(this)
                .style("stroke", "gold")
                .attr("stroke-width", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('stroke', color['Espa?a'])
                .attr("stroke-width", 3);
            });

        var path_ptg = svg.append("path")
            .attr("d", line_ptg(valor_Ptg))
            .attr("stroke", "steelblue")
            .attr("stroke-width", "3")
            .attr("fill", "none")
            .style("stroke", color['Portugal'])
            .on("click", function(){
                alert("Hola");
            })
            .on("mouseover", function(d){
                d3.select(this)
                .style("stroke", "gold")
                .attr("stroke-width", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('stroke', color['Portugal'])
                .attr("stroke-width", 3);
            });




        
        svg.selectAll("circle_esp")
            .data(valor_Esp)
            .enter()
            .append("circle")
            .attr("cx", d => x(d[0]))
            .attr("cy", d => y(d[1]))
            .attr("r", 3)
            .style('fill', color['Espa?a'])
            .on("mouseover", function(d){
                d3.select(this)
                .style("fill", "gold")
                .attr("r", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('fill', color['Espa?a'])
                .attr("r", 3);
            });
        
        

        svg.selectAll("circle_pt")
            .data(valor_Ptg)
            .enter()
            .append("circle")
            .attr("cx", d => x(d[0]))
            .attr("cy", d => y(d[1]))
            .attr("r", 3)
            .style('fill', color['Portugal'])
            .on("mouseover", function(d){
                d3.select(this)
                .style("fill", "gold")
                .attr("r", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('fill', color['Portugal'])
                .attr("r", 3);
            });
    

        
        

    })

    .catch();

这就是.csv资料的样子：

A?o,Pais,Valor
2015,Espa?a,5
2015,Portugal,4
2016,Portugal,7
2016,Espa?a,3
2017,Portugal,8
2017,Espa?a,10
2018,Portugal,6
2018,Espa?a,7
2019,Portugal,1
2019,Espa?a,5
2020,Portugal,9
2020,Espa?a,12
2021,Portugal,10
2021,Espa?a,13

uj5u.com热心网友回复：

创建一个有填充但没有描边的组合路径：

const esp = valor_Esp.reverse();
const fullPath = `${line_ptg(valor_Ptg)} V ${y(esp[0][1])} ${line_ptg(esp)} V ${y(valor_Ptg[0][1])}`;

svg.append("path")
  .attr('d', fullPath)
  .style('stroke', 'none')
  .style('fill', 'blue')
  .style('fill-opacity', 0.25);

const csv = `A?o,Pais,Valor
2015,Espa?a,5
2015,Portugal,4
2016,Portugal,7
2016,Espa?a,3
2017,Portugal,8
2017,Espa?a,10
2018,Portugal,6
2018,Espa?a,7
2019,Portugal,1
2019,Espa?a,5
2020,Portugal,9
2020,Espa?a,12
2021,Portugal,10
2021,Espa?a,13`;

const data = d3.csvParse(csv);

valor_Esp = [];
valor_Ptg = [];

color = {"Espa?a": "red", "Portugal": "green"};
        data.forEach( d => {
            if (d.Pais == 'Espa?a'){
                valor_Esp.push([d.A?o, d.Valor]);}
            else if (d.Pais == 'Portugal'){
                valor_Ptg.push([d.A?o, d.Valor])
            }
        })

        together = {"Espa?a": valor_Esp, "Portugal": valor_Ptg}
        console.log(valor_Ptg)
        margin = ({top: 40, right: 20, bottom: 40, left: 50});
        height = 500 - margin.top - margin.bottom;
        width = 600 - margin.left - margin.right;

        
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        
        
        x = d3.scaleTime()
            .domain([d3.min(data, d => d.A?o), 
                d3.max(data, d => d.A?o)]).nice()
            .range([margin.left, width - margin.right]);

        y = d3.scaleLinear()
            .domain([0,
                d3.max(data, d =>  d.Valor)]).nice()
            .range([height - margin.bottom, margin.top]);

        
        svg.append("g")
            .attr("transform", `translate(0, ${height - margin.bottom})`)
            .call(d3.axisBottom(x).tickFormat(d3.format("d")));
        svg.append("g")
            .attr("transform", `translate(${margin.left}, 0)`)
            .call(d3.axisLeft(y));
        
let curve = d3.curveCatmullRom.alpha(0.2)
                 let area = d3.area()
                 .x(function (d) { return x(d[0]) })
                 .y0(function (d) { return y(d[0]) })
                 .y1(function (d) { return y(d[0]) })
                 .curve(curve); 
        
        var line_esp = d3.line()
                .x(function(d){
                    return x(d[0]);
                })
                .y(function(d){
                    return y(d[1]);
                })
                .curve(curve);
                

        var line_ptg = d3.line()
                .x(function(d){
                    return x(d[0]);
                })
                .y(function(d){
                    return y(d[1]);
                })
                .curve(curve);
        

      
        
        var path_esp = svg.append("path")
            .attr("d", line_esp(valor_Esp))
            .attr("stroke", "steelblue")
            .attr("stroke-width", "3")
            .attr("fill", "none")
            .style("stroke", color['Espa?a'])
            
            .on("click", function(){
                alert("Hola");
            })
            .on("mouseover", function(d){
                d3.select(this)
                .style("stroke", "gold")
                .attr("stroke-width", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('stroke', color['Espa?a'])
                .attr("stroke-width", 3);
            });

        var path_ptg = svg.append("path")
            .attr("d", line_ptg(valor_Ptg))
            .attr("stroke", "steelblue")
            .attr("stroke-width", "3")
            .attr("fill", "none")
            .style("stroke", color['Portugal'])
            .on("click", function(){
                alert("Hola");
            })
            .on("mouseover", function(d){
                d3.select(this)
                .style("stroke", "gold")
                .attr("stroke-width", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('stroke', color['Portugal'])
                .attr("stroke-width", 3);
            });
        
        svg.selectAll("circle_esp")
            .data(valor_Esp)
            .enter()
            .append("circle")
            .attr("cx", d => x(d[0]))
            .attr("cy", d => y(d[1]))
            .attr("r", 3)
            .style('fill', color['Espa?a'])
            .on("mouseover", function(d){
                d3.select(this)
                .style("fill", "gold")
                .attr("r", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('fill', color['Espa?a'])
                .attr("r", 3);
            });
        
        

        svg.selectAll("circle_pt")
            .data(valor_Ptg)
            .enter()
            .append("circle")
            .attr("cx", d => x(d[0]))
            .attr("cy", d => y(d[1]))
            .attr("r", 3)
            .style('fill', color['Portugal'])
            .on("mouseover", function(d){
                d3.select(this)
                .style("fill", "gold")
                .attr("r", 6)
            })
            .on("mouseout", function(){
                d3.select(this)
                .style('fill', color['Portugal'])
                .attr("r", 3);
            });

const esp = valor_Esp.reverse();
const fullPath = `${line_ptg(valor_Ptg)} V ${y(esp[0][1])} ${line_ptg(esp)} V ${y(valor_Ptg[0][1])}`;

svg.append("path")
    .attr('d', fullPath)
  .style('stroke', 'none')
  .style('fill', 'blue')
  .style('fill-opacity', 0.25)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

在2条路径之间绘制区域

0 评论

发表评论

最新文章

斥350亿美元建新航厦，迪拜将打造世界最大机场

Windows系统安装最详细教程，基于U盘方式

分手后仍难以与前任断绝联系的三大星座，纠缠不清的情感纠葛！

优秀的女人，必须坚持的11个生活习惯！

此刻，像宋人一样热爱生活！

唐诗中描写爱情的6句诗，最深的情遇到最美的诗！

随机推荐

c#WPF主视窗按钮在UserControl代码中无法识别？

无法从K8集群编辑nginx.conf档案

由于在初始HTML档案中加载文本的div，如何除错和修复最大的内容绘制LCP问题？

SQL计算在特定用户中有多少列具有特定值

提取相关的XML组件

我想将某些东西分组以成为字典和串列。还根据标题对它们进行分组

热门分类

热门标签

c#WPF主视窗按钮在UserControl代码中无法识别？

无法从K8集群编辑nginx.conf档案

由于在初始HTML档案中加载文本的div，如何除错和修复最大的内容绘制LCP问题？

在2条路径之间绘制区域

如何撰写代码来拒绝状态尚未批准发布的用户

如何修复在查询集API中使用原始函式MAX未...

0 评论

发表评论

最新文章

随机推荐

热门分类

热门标签