在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>

標籤：

上一篇：如何在D3.js版本7中加載兩個外部檔案？

下一篇：D3Jsv3：路徑未顯示在節點元素上