0 
//build legend key
        var svgContainer = d3.select("#TMLegend").append("svg")
              .attr("width", 972)
              .attr("height", 30);
        var width = 35, height = 10, x = 0;

        for(var e =0; e < root.children.length; e++){           
           svgContainer
              .append("rect")
              .attr("x", 0)
              .attr("y", 10)
              .attr("width", width)
              .attr("height", height)
              .attr("transform", "translate("+(36*x++)+",0)")
              .style("fill", function(){
                return colorArr[root.children[e].name];
              })
              .attr("title", function(){
                return root.children[e].name;
              })

              .text(function(){
                return root.children[e].name;
              });  
        }
d3.selectAll("#TMLegend rect").on("mouseover",function () {
        var title = d3.select(this).text();
        $("#TMLegendPopUp").show().html("<h4>"+title+"</h4>");
          //Popoup position
         $(document).mousemove(function(e){
             var popLeft = e.pageX + 10;
             var popTop = e.pageY + -90;
             $("#TMLegendPopUp").css({"left":popLeft,"top":popTop});
             $("#TMLegendPopUp h4").css({"background": colorArr[title], "margin":0});
        });    
    });

上面的代码是我尝试以 id 为 TMLegend 的 div 为目标，并尝试深入到 svg:rect.attr('id') 以获取 rect 元素 id 的内容。从那时起，我已经消除了放置 ID Attr() 并且现在以 text() 为目标。此代码在矩形节点被硬编码时有效，但在我使用 D3 生成它们时无效。有没有人有办法用 D3 动态获取 rect 元素的文本？

硬编码的 html 如下所示：

        <div id="TMLegend">
       <svg width="972" height="30">

农产品 宝石和金属 矿物产品 建筑材料 纺织品 非常感谢。

4

1 回答 1

0

这与预期的一样，d3.select只选择了第一个匹配元素。您需要使用d3.selectAll来选择图例中的所有矩形，然后d3.select(this)在鼠标悬停时用于定位每个单独的矩形。根据我认为您要完成的工作，您需要以下内容：

d3.selectAll("#TMLegend rect").on("mouseover",function () { 
  $("#TMLegendPopUp").show()
    .html("<h4 style='margin:0'>" + d3.select(this).attr("id") + "</h4>");

    //Popoup position
   $(document).mousemove(function(e){
       var popLeft = e.pageX + 10;
       var popTop = e.pageY + -90;
       $("#TMLegendPopUp").css({"left":popLeft,"top":popTop});
   }); 
});
于 2013-06-24T21:27:29.577 回答