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});
        });    
    });

上記のコードは、TMLegend の ID を持つ div をターゲットにして、svg:rect.attr('id') にドリルダウンして、rect 要素 ID のコンテンツを取得しようとする私の試みでした。それ以来、私は ID Attr() を配置することをやめ、現在は text() をターゲットにしています。このコードは、rect ノードがハードコードされている場合は機能しますが、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 に答える