Question

我正在为乌克兰创建一个具有一些经济指标的热图。

根据选中的单选按钮，使用不同的色阶进行可视化不同的价值观/指标。

        d3.selectAll('.radio').on('change', function(){

            if (document.getElementById('none').checked) {

                            areas.transition().duration(250)
                                 .attr('fill','steelblue');}

            else if (document.getElementById('agr').checked) {

                            areas.transition().duration(250)
                                 .attr('fill', function(d){return colorScaleagr(d.properties.agricindx)});}
.... and so on.

现在工具提示（div）仅显示悬停的区域的名称。我还想显示该区域的值，对应于此刻选择的指标。工具提示的内容（名称）在路径/地图元素的事件处理程序中确定。

var areas = group.append('path')
                    .attr('d',path)
                    .attr('class', function(d) { return "subunit" + d.id; })
                    .attr('fill','steelblue')
                    .attr('stroke', 'white')
                    .attr('stroke-width', '1px')
                    .attr('opacity','0.8')
                                                       // Hover & Tooltip
                    .on("mouseover", function(d) {
                        d3.select(this).transition().duration(200).style("opacity", 1);
                        div.transition().duration(300).style("opacity", 1)                          
                        div.html(d.properties.name )
                           .style("left", (d3.mouse(this)[0] + 330)  + "px")
                           .style("top", (d3.mouse(this)[1] + 15)  + "px");
                        })

                    .on("mousemove", function(d) {                                                  
                        div.html(d.properties.name)
                           .style("left", (d3.mouse(this)[0] + 350) + "px")
                           .style("top", (d3.mouse(this)[1] + 25)  + "px");

                        })  

                    .on("mouseout", function(d) {
                        d3.select(this).transition().duration(200).style("opacity", 0.8);                           
                        div.transition().duration(300).style("opacity", 0)                          
                        });

所以现在我的问题是：我怎样才能考虑到单选按钮的状态，在路径元素（区域）中，因为单个实体（区域）的数据存储在那里。如果我尝试在无线电选项中操纵工具提示，那么我无法获得数据。我希望自己明白了:)。我感谢任何帮助。

Answer 1

我想我明白你想要做什么，这是我尝试做的事情：

将数据格式化为具有键/值对的对象，如下所示：＆＃39; none＆＃39;：10，＆＃39; agr＆＃39;：4等等......
将来自不同单选按钮的密钥存储为您在无线电更改功能上更新的全局变量。
在鼠标悬停功能上创建工具提示时，请通过调用d [key]打印正确的值，即d [＆＃39; agr＆＃39;]。

希望有所帮助！

d3.js - 使用单选按钮更改工具提示的值

1 个答案: