D3更新ツールヒントHTML

Question

私は、次のHTML正常に動作しているD3コードの下

   <div id="tooltip" className="hidden"> 
        <table> 
         <thead> 
         <tr> 
          <td colSpan="3"> 
           <strong id="headDate"></strong> 
          </td> 
         </tr> 
         </thead> 
         <tbody id="toolTipBody"> 
         </tbody> 
        </table> 
       </div> 

持っている：私は注入/にD3からツールチップにHTMLを追加する必要があり

   // ToolTip 
       d3.select('#tooltip') 
        .classed("hidden", false) 
        .style("left", d3.event.pageX + "px") 
        .style("top", d3.event.pageY + "px") 
        .select('#headDate').text(d0.date); 

を#toolTipBody要素。行の数や行の名前が変わるとダイナミックになる必要があります（それ以外の場合は、HTMLをハードコーディングしてD3 .select .textを使用して更新を行います）。

以下に示すように#toolTipBody

     <tr> 
          <td className="legend-color-guide"><div></div></td> 
          <td id="key">1.0E-6MHz</td> 
          <td id="value">46.50</td> 
         </tr> 

おかげ アダム

Answer 1

あなたは、動的にHTMLの一部を変更することができます。

d3.select('#tooltip').html(newHTML); 

参考：https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#html

デモ - （円以上のマウス）

var testData = [{ 
 
    data: [{ 
 
    key: "1.0E-6MHz", 
 
    value: "46.50" 
 
    }, { 
 
    key: "2.0E-6MHz", 
 
    value: "50.50" 
 
    }], 
 
    date: "Apr 10", 
 
    color: "red" 
 
}, { 
 
    data: [{ 
 
    key: "1.0E-6MHz", 
 
    value: "46.50" 
 
    }, { 
 
    key: "2.0E-6MHz", 
 
    value: "50.50" 
 
    }, { 
 
    key: "1.8E-6MHz", 
 
    value: "10.50" 
 
    }], 
 
    date: "Feb 19", 
 
    color: "green" 
 
}]; 
 

 
d3.select("svg") 
 
    .selectAll(".node") 
 
    .data(testData) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("r", 5) 
 
    .attr("cx", function(d, i) { 
 
    return (i + 1) * 100 
 
    }).attr("cy", 50) 
 
    .on("mouseover", function(d) { 
 
    d3.select('#tooltip') 
 
     .classed("hidden", false) 
 
     .style("left", d3.event.pageX + "px") 
 
     .style("top", d3.event.pageY + "px") 
 
     .select('#headDate').text(d.date); 
 

 
    var newHtml = []; 
 
    d.data.forEach(function(h) { 
 
     newHtml.push('<tr>', 
 
     '<td id="key">' + h.key + '</td>', 
 
     '<td id="value">' + h.value + '</td>', 
 
     '</tr>'); 
 
    }); 
 

 
    d3.select('#tooltip') 
 
     .select("#toolTipBody").html(newHtml.join("")) 
 
    }) 
 
    .on("mouseout", function(d) { 
 
    d3.select('#tooltip') 
 
     .classed("hidden", true); 
 
    });

#tooltip { 
 
    position: absolute; 
 
    background-color: #cecece; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="tooltip" class="hidden"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <td colSpan="3"> 
 
      <strong id="headDate"></strong> 
 
     </td> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="toolTipBody"> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<svg width=400 height=200> 
 
</svg>