Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

276
Visualizações
D3 SVG path is not filling with linear scale gradient

I have a an SVG where I am targeting a certain path element with id: _116.

I can fill the path easily with a solid colour by doing this:

 d3.select("path#_116").style("fill", 'blue');

However lets say I have a linear scale colour so that I want a gradient applied to it:

let scale = d3.scaleLinear()
    .domain([1,10])
    .range(["white", "blue"]);

d3.select("path#_116").style("fill", scale);

This just doesn't work. For some reason it's setting the fill to a black colour (#212a39) which seems like is coming from the sibling element as shown below:

enter image description here

Any ideas on what's happening here?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

The scale function will return a single color for a provided value (as is true for all D3 scaling functions), which likely explains the output you are seeing. The scale by default is not clamped, so the scale will interpolate values outside the domain and return values outside the range, which explains why you have a value that doesn't appear to fit in your domain.

Scaling functions do not modify the DOM but a gradient requires elements within the SVG to represent the gradients. Usually gradients are children of a defs tag:

<svg>
    <defs>
      <linearGradient id="gradient">
        <stop stop-color="white" offset="0%"/>
        <stop stop-color="blue" offset="100%"/>
      </linearGradient>
     </defs>
     <rect width=300 height=100 fill="url(#gradient)"></rect>
</svg>

If you have an existing SVG and want to amend a single path, we can append the defs, the gradient, the stops, and apply it to a given path:

d3.xml("https://upload.wikimedia.org/wikipedia/commons/a/ab/Isobates-simple_example.svg")
   .then(function(image) {  

    let svg = d3.select("body")
      .append(()=>image.documentElement);
      
    let gradient = svg.append("defs")
      .append("linearGradient")
      .attr("id","gradient");
      
    gradient.append("stop")
       .attr("stop-color","white")
       .attr("offset","0%")
      
    gradient.append("stop")
        .attr("stop-color","blue")
        .attr("offset","100%");
        
    svg.selectAll("#path3156")
      .style("fill", "url(#gradient)");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.0/d3.min.js"></script>

There are ways you can more efficiently do this, though generally you'll be going about achieving the same structure in the DOM (using .append() and .html() can save some lines). And D3 is completely optional as well - this is just adding a few elements to the DOM and setting an existing element's fill.

Your question appears to be concerned with a singular gradient, but if we have many gradients the answer gets a bit more complicated if we want the gradients to be data driven and incorporate scaling into the mix. Since I don't think you are asking about that I'll leave that for another time.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda