d3尝试在单击时在div或iframe中打开html [英] d3 trying to open html in div or iframe on click

问题描述

我有一个d3条形图，我想拥有它，因此，当单击条形图上的条形图时，HTML会加载到页面的另一部分中.当我一直试图研究如何做到这一点时，我变得越来越困惑.我应该使用<div>还是<iframe>?我有这个功能，就单击事件而言是有效的:

I have a d3 bar chart and I would like to have it so when a bar is clicked on the chart, HTML is loaded in another section of the page. As I've been trying to research how to do this, I am becoming more and more confused. Should I use a <div> or an <iframe>? I have this which works as far as a clicking event goes:

.on("click", function() { alert("Hello world"); })

但是我不希望使用它，因为我希望不同的栏打开不同的内容.因此，我还需要弄清楚如何将单击哪个栏与打开哪个文件联系起来.谁能指出我正确的方向?谢谢.

But I don't think I can use it since I want different bars to open different content. So I also need to figure out how to tie which bar is clicked to which file is opened. Can anyone point me in the right direction? Thanks.

推荐答案

添加一个onclick事件，该事件将单击的条形引用传递给加载html的函数.

Add an onclick event which passes clicked bar reference to the function which loads html.

.on('click', function(d) {loadHtml(d)});

然后创建一个loadHtml函数

Then create a loadHtml function

function loadHtml(clickedBar)
{
  if (clickedBar[0] = "foo")
  {
      $('#DivForLoadingHtml').load("http://mydomain.xyz/foo.htm");
  }   
  if (clickedBar[0] = "bar")
  {
      $('#DivForLoadingHtml').load("http://mydomain.xyz/bar.htm");
  } 

}

这篇关于d3尝试在单击时在div或iframe中打开html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！