D3更新工具提示HTML

我有以下的HTMLD3更新工具提示HTML

   <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代碼是工作的罰款：

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

我需要注入/從D3追加HTML刀尖進入#toolTipBody元素。它需要是動態的行數和行數可以改變（否則我可以硬編碼的HTML和只使用D3。選擇&。文本進行更新。

如何添加說以下內容#toolTipBody

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

感謝亞當

來源

2017-10-11 Adam

什麼是觸發提示的人口的動作（和你有可視化的模型或屏幕截圖）？ –

也，我看到你正在使用'className'，所以我假設你正在使用React？ –

是的使用反應...我會添加一個截圖...將添加所有的代碼，但大多數是不相關的。 – Adam

您可以動態地更改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>

來源

2017-10-11 05:02:51 Gilsha

D3更新工具提示HTML

回答

相關問題