d3 trying to open html in div or iframe on click

问题

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.

回答1:

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

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

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

}

来源：https://stackoverflow.com/questions/47543331/d3-trying-to-open-html-in-div-or-iframe-on-click