Question

我有一个使用JQuery UI Dialog和d3的可视化任务。图中有很多节点，我想在点击一个节点时打开一个弹出框。该节点的内容和图像将显示在弹出窗口中。代码如下所示。

目前，弹出框不显示图像，仅显示内容和标题。但是，如果我将对话框打开功能移出函数click（）。图像可以正确显示。我不知道为什么。任何建议表示赞赏！谢谢！

<body>
   <div id="contents" style="display:none">
      Popup Contents
      <img id="image" src="" />
   </div>
   <script>
       var graph={};
       var force = d3.layout.force()
      .charge(-500)
      .linkDistance(30)
      .size([width-400, height]);

      var svg = d3.select("body").append("svg")
      .attr("height", height).attr("width", width);

      d3.csv("nodes.csv", function(d){
         return {
          id: +d.id,
          name: d.name,
         }; 
      }, function(error, nodes){
            graph.nodes = nodes;
            var node = svg.selectAll(".node")
                          .data(graph.nodes)
                          .enter().append("circle")
                          .on("click", click);
        });
     });
     function click(d,e) {
         uri = 'images/a.png'
         $('#contents').attr("title",name)
         .dialog({
              width:'auto',
              height:'auto',
              modal: true,
              open: function(event, ui){
                 $('#image').attr('src',uri);
              }
     });

JQuery UI对话框图像无法显示

0 个答案: