CODEWITHSUNDEEP
javascriptd3.jssvg
heshjse
heshjse

Reputation: 910

How to call javascript function from D3 button

I create button in D3 SVG popup window using following code.

 window.div = d3.select("body").append("div") 
    .attr("class", "tooltip")       
    .style("opacity", 0);

sampleSVG.append('circle')
  .attr('id', 'endcricle'+idendelement++)
  .style("stroke", "black")
  .style("stroke-width", "4")
  .style("fill", "white")
  .attr('transform', 'translate(' + d3.event.pageX + ',' + d3.event.pageY+  ')')
  .attr('r', '20')
  .on("mouseover", function(){
     d3.select(this).style("fill", "aliceblue");
     var t = d3.select(this).attr("id");
        function getScreenCoords(x, y, ctm) {
          var xn = ctm.e + x*ctm.a + y*ctm.c;
          var yn = ctm.f + x*ctm.b + y*ctm.d;
          return { x: xn, y: yn };
        }
        var circle = document.getElementById(t),
        cx = +circle.getAttribute('cx'),
        cy = +circle.getAttribute('cy'),
        ctm = circle.getCTM(),
        coords = getScreenCoords(cx, cy, ctm);
         console.log(coords.x, coords.y);

      window.div.transition()    
            .duration(200)    
            .style("opacity", .9);    
        div .html( "<input id="+"trash-button"+" type="+"image"+" title="+"End Event"+" src="+"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTJW-WQ71uV3QRXF4bEYq8v6JvI7sshASrKLisTWLTWVLF3jqkj"+" alt="+"trash"+" style="+"width:25px;"+" >"+"<br>"+"<button onclick="+"trashfuntion()"+">"+"Click Me"+"</button> ")  
           .style("left", (coords.x+25)+ "px")   
        .style("top", (coords.y+28)+ "px");  

     })
  .on("mouseout", function(){d3.select(this).style("fill", "white");})
  .call(drag);

I want to call trashfuntion function like this 

function trashfuntion(){
     console.log("trash");
 }

This button don't call this function.Could you please tell me what is the error in this code.

Upvotes: 0

Views: 4134

Answers (2)

Gilsha
Gilsha

Reputation: 14591

The problem is you have set the onclick listener to the image element rather than button. The code works fine.

var div = d3.select("div");
div.html(  
     "<input id="+"trash-button"+" type="+"image"+" title="+"End Event"+" src="+"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTJW-WQ71uV3QRXF4bEYq8v6JvI7sshASrKLisTWLTWVLF3jqkj"+" alt="+"trash"+" style="+"width:25px;"+" >"+"<br>"+"<button onclick="+"trashfuntion()"+">"+"Click Me"+"</button> ")  
      .style("left", "10px")   
      .style("top", "10px");

function trashfuntion(){
  alert("Called");
}
div{
  height: 250px;
  width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div></div>

EDIT:

Hope this new snippet helps.

var tooltipDiv = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("opacity", 0);

var graph = {
  "nodes": [{
    "name": "1",
    "rating": 90,
    "id": 2951
  }, {
    "name": "2",
    "rating": 80,
    "id": 654654
  }, {
    "name": "3",
    "rating": 80,
    "id": 6546544
  }, {
    "name": "4",
    "rating": 1,
    "id": 68987978
  }, {
    "name": "5",
    "rating": 1,
    "id": 9878933
  }, {
    "name": "6",
    "rating": 1,
    "id": 6161
  }, {
    "name": "7",
    "rating": 1,
    "id": 64654
  }, {
    "name": "8",
    "rating": 20,
    "id": 354654
  }, {
    "name": "9",
    "rating": 50,
    "id": 8494
  }, {
    "name": "10",
    "rating": 1,
    "id": 6846874
  }, {
    "name": "11",
    "rating": 1,
    "id": 5487
  }, {
    "name": "12",
    "rating": 80,
    "id": "parfum_kenzo"
  }, {
    "name": "13",
    "rating": 1,
    "id": 65465465
  }, {
    "name": "14",
    "rating": 90,
    "id": "jungle_de_kenzo"
  }, {
    "name": "15",
    "rating": 20,
    "id": 313514
  }, {
    "name": "16",
    "rating": 40,
    "id": 36543614
  }, {
    "name": "17",
    "rating": 100,
    "id": "Yann_YA645"
  }, {
    "name": "18",
    "rating": 1,
    "id": 97413
  }, {
    "name": "19",
    "rating": 1,
    "id": 97414
  }, {
    "name": "20",
    "rating": 100,
    "id": 976431231
  }, {
    "name": "21",
    "rating": 1,
    "id": 9416
  }, {
    "name": "22",
    "rating": 1,
    "id": 998949
  }, {
    "name": "23",
    "rating": 100,
    "id": 984941
  }, {
    "name": "24",
    "rating": 100,
    "id": "99843"
  }, {
    "name": "25",
    "rating": 1,
    "id": 94915
  }, {
    "name": "26",
    "rating": 1,
    "id": 913134
  }, {
    "name": "27",
    "rating": 1,
    "id": 9134371
  }],
  "links": [{
    "source": 6,
    "target": 5,
    "value": 6,
    "label": "publishedOn"
  }, {
    "source": 8,
    "target": 5,
    "value": 6,
    "label": "publishedOn"
  }, {
    "source": 7,
    "target": 1,
    "value": 4,
    "label": "containsKeyword"
  }, {
    "source": 8,
    "target": 10,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 7,
    "target": 14,
    "value": 4,
    "label": "publishedBy"
  }, {
    "source": 8,
    "target": 15,
    "value": 6,
    "label": "publishedBy"
  }, {
    "source": 9,
    "target": 1,
    "value": 6,
    "label": "depicts"
  }, {
    "source": 10,
    "target": 1,
    "value": 6,
    "label": "depicts"
  }, {
    "source": 16,
    "target": 1,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 2,
    "value": 5,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 3,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 4,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 19,
    "target": 18,
    "value": 2,
    "label": "postedOn"
  }, {
    "source": 18,
    "target": 1,
    "value": 6,
    "label": "childOf"
  }, {
    "source": 17,
    "target": 19,
    "value": 8,
    "label": "describes"
  }, {
    "source": 18,
    "target": 11,
    "value": 6,
    "label": "containsKeyword"
  }, {
    "source": 17,
    "target": 13,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 20,
    "target": 13,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 20,
    "target": 21,
    "value": 3,
    "label": "postedOn"
  }, {
    "source": 22,
    "target": 20,
    "value": 3,
    "label": "postedOn"
  }, {
    "source": 23,
    "target": 21,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 24,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 25,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 26,
    "value": 3,
    "label": "manageWebsite"
  }]
}


var margin = {
  top: -5,
  right: -5,
  bottom: -5,
  left: -5
};
var width = 500 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-200)
  .linkDistance(50)
  .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

var zoom = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);


var svg = d3.select("#map").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
  .call(zoom);

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

var container = svg.append("g");

//d3.json('http://blt909.free.fr/wd/map2.json', function(error, graph) {

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();



var link = container.append("g")
  .attr("class", "links")
  .selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });

var node = container.append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .call(drag);

node.append("circle")
  .attr("r", function(d) {
    return d.weight * 2 + 12;
  })
  .style("fill", function(d) {
    return color(1 / d.rating);
  });


force.on("tick", function() {
  link.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});

var linkedByIndex = {};
graph.links.forEach(function(d) {
  linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

function isConnected(a, b) {
  return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}

function trashfuntion() {
  console.log("trash");
}

node.on("mouseover", function(d) {

  var t = d3.select(this).attr("id");

  var coords = d3.mouse(this);


  tooltipDiv.transition()
    .duration(200)
    .style("opacity", .9);

  tooltipDiv.html("<input id=" + "trash-button" + " type=" + "image" + " title=" + "End Event" + " src=" + "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTJW-WQ71uV3QRXF4bEYq8v6JvI7sshASrKLisTWLTWVLF3jqkj" + " alt=" + "trash" + " style=" + "width:25px;" + " >" + "<br>" + "<button onclick=" + "trashfuntion()" + ">" + "Click Me" + "</button> ")
    .style("left", d3.event.x + "px")
    .style("top", d3.event.y + "px");


  tooltipDiv.select("#trash-button").on("click", function() {
    tooltipDiv.style("opacity", 0);
  });

});


function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();

  d3.select(this).classed("dragging", true);
  force.start();
}

function dragged(d) {

  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);

}

function dragended(d) {

  d3.select(this).classed("dragging", false);
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
.node-active {
  stroke: #555;
  stroke-width: 1.5px;
}
.link {
  stroke: #555;
  stroke-opacity: .3;
}
.link-active {
  stroke-opacity: 1;
}
.overlay {
  fill: none;
  pointer-events: all;
}
#map {
  border: 2px #555 dashed;
  width: 500px;
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="map"></div>
</body>

Upvotes: 2

rmoestl
rmoestl

Reputation: 3155

Instead of incorporating the onclick = ... function into the html string you're setting with html, it is better to register click / event handlers with d3.on documented here.

Example

d3.select('div') .html('<input ...') .on('click', function() { console.log("I've been clicked!"); });

Caveat

The way DOM elements are created outlined in the question with html() is "unconventional", since the more d3.js ideomatic way of doing things is to use methods like selection.append() and selection.insert().

Upvotes: 0

Related Questions