CODEWITHSUNDEEP
javascriptd3.js
DevSa
DevSa

Reputation: 198

How to add a sibling element in d3.js

I am trying to add multiple 'stop' elements like this: defs lineargradient stop stop stop stop

This is my code

 newSlice.append('defs')
    .append('linearGradient')           
    .append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "red")
    .enter() 
    .append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "red")
    .enter() ....... so on

But this creates only one stop element. Help please.

Upvotes: 1

Views: 344

Answers (1)

ksav
ksav

Reputation: 20821

Break it up like this:

const grad = newSlice.append('defs')
    .append('linearGradient');

const stop1 = grad.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "red");

const stop2 = grad.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "red");

Then you have a variable for your gradient and each stop for access later on if you need eg:

stop2.attr("offset", "50%")

Upvotes: 1

Related Questions