选择值更改时动态工具提示文本d3

时间:2013-12-02 13:17:39

标签: javascript d3.js tooltip

我正在尝试绘制一个动态的等值线图

我从选择输入中选择要显示的属性  该属性映射在json数据集中,并使用d3 choropleth tecnique提供

当我尝试用鼠标悬停在工具提示对象值上时,属性不刷新,工具提示继续显示旧属性的值。

有什么建议吗?我的代码如下。

提前致谢。

    var divtool = d3.select("body").append("div")   
                .attr("class", "tooltip")               
                .style("opacity", 0);

        //onchange choropleth
            d3.selectAll(".demosearch").on("change", function () {
                    var t = this.value;

                          if(t  != 'none'){

                                quantize.domain([
                                d3.min(mn_map.features, function(d) { return d.properties[t]; }), 
                                d3.max(mn_map.features, function(d) { return d.properties[t]; })
                                ]);

                                d3.selectAll("#mappa").attr("class", t)
                                svg.selectAll(".comune")
                                   .data(mn_map.features) 
                                   .attr("class",  function(d) { return (quantize(d.properties[t])); })
                                   .style("opacity", 0.8);

                      //Adding mouseevents
                                   .on('mouseover', function (d) {
                                    d3.select(this).transition().duration(100).style({'opacity': 0.8, 'stroke': 'red', "stroke-width": 4  })
                            divtool.text(d.properties.NOME_COM + " : " +t+" : "+ d.properties[t])
                                   .style("opacity", 1) 
                                   .style("left", (d3.event.pageX) + "px")    .style("top", (d3.event.pageY -30) + "px");                                          })


                                   .on('mouseout', function (d) {                           d3.select(this).transition().duration(100).style({'opacity': 0.8, 'stroke': '#909090', "stroke-width": 1 });
                                    divtool.style("opacity", 0);
                                  })
                                            }// <-- End if test this.value

                        else {
                         svg.selectAll("#mappa")
                            .transition().duration(500)
                            .attr("class","mappa" )
                         divtool.remove();  
                        };

0 个答案:

没有答案