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）当单选按钮改变时。

我还需要改变颜色功能的范围（我有一个完全不同的供应商颜色比例）

我尝试了一些改变功能以获得单选按钮的值，但我从来没有设法做任何事情。

非常感谢任何帮助。感谢

Answer 1

首先为供应商制作另一种色标（供应商的颜色规模完全不同）：

SelectableChannel

现在以你的风格填写路径就像这样：

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"]);

D3根据单选按钮更改颜色和比例

1 个答案: