javascript - 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)

我想要实现的是使样式中的颜色部分从 颜色(d.properties.sum_clients)到 颜色(d.properties.sum_vendors)当单选按钮改变时。

我还需要改变颜色函数的范围(我有一个完全不同的 vendor 颜色比例)

我尝试了一些更改函数来获取单选按钮的值，但我从来没有成功过。

非常感谢任何帮助。谢谢

Answer 1

首先为 vendor 制作另一个色标(我有一个完全不同的 vendor 色标):

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)