如何从D3按钮调用javascript函数

时间：2016-06-03 04:22:56

标签： javascript d3.js svg

我使用以下代码在D3 SVG弹出窗口中创建按钮。

return Enumerable.Range(0, bytes.Length/2)
    .Select(index => (float)BitConverter.ToUInt16(bytes, index*2))
    .ToArray();

我想像这样调用import {Component, OnInit} from "@angular/core"; export class YourComponent implements OnInit{ ngOnInit():void { //handle your subscription here } } 函数

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

此按钮不会调用此函数。请您告诉我此代码中的错误是什么。

2 个答案:

答案 0 :(得分：2)

问题是您已将onclick侦听器设置为图像元素而非按钮。代码工作正常。

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>

修改

希望这个新代码片段有所帮助。

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>

答案 1 :(得分：0)

不是将onclick = ...函数合并到您使用html设置的 html 字符串中，最好使用d3.on注册点击/事件处理程序记录here。

示例

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

买者

在使用html()的问题中概述的创建DOM元素的方式是“非常规的”，因为更多d3.js的意识形态方法是使用selection.append()和{{1}等方法}。

相关问题
最新问题