D3 Измените цвет и масштаб на основе радиокнопки

Question

Я пытаюсь выяснить, как изменить свой вид на переключателе. У меня есть эта кнопка радио:

<div> 
     <input type="radio" name="dataset" value="sum_clients" checked> Clients 
     <input type="radio" name="dataset" value="sum_vendors"> Vendors 

</div> 

...

и следующий сценарий:

var color = d3.scale.linear() 
     .domain ([0, 1, 2, 100, 1000, 10000, 100000, 1000000, 1758668]) 
     .range (["white", "#cce0ff", "#b3d1ff", "#80b3ff", "#66a3ff", "#4d94ff", "#1a75ff", "#005ce6", "#003d99"]); 


features.selectAll("path") 
     .data(topojson.feature(geodata,geodata.objects.collection).features) 
     .enter() 
     .append("path") 
     .attr("d",path) 
     .style("fill", function(d){return color(d.properties.sum_clients); }) 
     .style("stroke", "#837E7C") 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide) 

Что я пытаюсь добиться, чтобы сделать цветовую роль в изменении стиля от color (d.properties.sum_clients) - цвет (d.properties.sum_vendors) при изменении переключателя.

Я также нужен диапазон функции цвета (у меня есть совершенно другой масштаб цветов для поставщиков), чтобы изменить

Я пробовал некоторые на функции изменения, чтобы получить значение кнопки радио, но я так и не удался заставить что-нибудь работать.

Любая помощь очень ценится. Благодаря

Answer 1

Сначала сделайте другую цветовую шкалу для поставщиков (у меня есть совершенно другой масштаб цветов для поставщиков):

var color = d3.scale.linear() 
     .domain ([0, 1, 2, 100, 1000, 10000, 100000, 1000000, 1758668]) 
     .range (["white", "#cce0ff", "#b3d1ff", "#80b3ff", "#66a3ff", "#4d94ff", "#1a75ff", "#005ce6", "#003d99"]); 

var vendorcolor = d3.scale.linear() 
     .domain ([0, 1, 2, 100, 1000, 10000, 100000, 1000000, 1758668]) 
     .range (["white", "red", "green", "blue", "black", "yellow", "purple", "indigo", "violet"]); 

Теперь в вашем стиле заполнить для пути сделать это следующим образом:

features.selectAll("path") 
     .data(topojson.feature(geodata,geodata.objects.collection).features) 
     .enter() 
     .append("path") 
     .attr("d",path) 
     .style("fill", function(d){ 
        //get the value of the checked 
        var value = d3.select('input[name="dataset"]:checked').node().value; 
        if(value =="sum_vendors"){ 
         return vendorcolor(d.properties.sum_vendors); 
        } else { 
         return color(d.properties.sum_clients); 
        } 
     }) 
     .style("stroke", "#837E7C") 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide)