D3 Examples - addlinkToObj

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/d3.v2.js"></script>
​
    </head>
    <body>
        <script type="text/javascript">
          var width = 449;
          var height = 249;
          var word = "gongoozler";
​
          var holder = d3.select("body")
                .append("svg")
                .attr("width", width)    
                .attr("height", height); 
​
          // draw a rectangle
          holder.append("a")
              .attr("xlink:href", "https://en.wikipedia.org/wiki/"+word)
              .append("rect")  
              .attr("x", 100)
              .attr("y", 50)
              .attr("height", 100)
              .attr("width", 200)
              .style("fill", "lightgreen")
              .attr("rx", 10)
              .attr("ry", 10);
​
          // draw text on the screen
          holder.append("text")
              .attr("x", 200)
              .attr("y", 100)
              .style("fill", "black")
              .style("font-size", "20px")
              .attr("dy", ".35em")
              .attr("text-anchor", "middle")
              .style("pointer-events", "none")
              .text(word);
​
            /*var text = holder.selectAll("text")
                .data([0])
                .enter()
                .append("text")
                .text("Testing")
                .attr("x", "40")
                .attr("y", "60")
                    .style("pointer-events", "none");
​
            var imgs = holder.selectAll("image").data([0]);
                imgs.enter()
                .append("svg:image")
                .attr("xlink:href", "file:///D:/d3js_projects/refresh.png")
                .attr("x", "60")
                .attr("y", "60")
                .attr("width", "20")
                .attr("height", "20");*/
​
        </script>
    </body>
</html>
​
    