如何在d3js中为文本元素添加href并使用缩放功能

huangapple
go评论99阅读模式
英文:

How to give href to text element in d3js with zoom function

问题

我有一个带有缩放功能的d3.js图表。图表上有一些标签，我希望这些标签可以像href链接一样可点击。似乎href与缩放功能发生了冲突。只有href或缩放中的一个有效。两者不能一起工作。只有当我注释掉缩放代码时，href才有效。只有当我注释掉href代码时，缩放才有效。如何使href和缩放同时有效？

  1. var margin = {top: 10, right: 10, bottom: 20, left: 40},
  2.     width = 450 - margin.left - margin.right,
  3.     height = 380 - margin.top - margin.bottom;
  5. let data = [
  6.     [95,'0.7142914222463218','#0000FF','(535/535)',0,"www.a.net"],
  7.     [97,'1.5753396297416553','#00FF00','(267/267)',0,"www.b.net"],
  8.     [97,'3.965827978600963','#808080','(14/14)',0,"www.c.net"],
  9.     [100,'5.340348252548648','#FFAFAF','(7/8)',0,"www.d.net"],
  10.     [100,'5.699038509168024','#FFAFAF','(1/8)',0,"www.e.net"],
  11.     [77,'19.506535109626878','#FF0000','(5/5)',0,"www.f.net"],
  12.     [77,'19.506535109626878','#FF0000','(2/2)',42,"www.g.net"]
  13. ];
  15. var SVG = d3.select("body")
  16.   .append("svg")
  17.     .attr("xmlns", "http://www.w3.org/2000/svg")
  18.     .attr("xlink", "http://www.w3.org/1999/xlink")
  19.     .attr("width", width + margin.left + margin.right)
  20.     .attr("height", height + margin.top + margin.bottom)
  21.     
  22.    SVG.append("g")
  23.     .attr("transform",
  24.           "translate(" + margin.left + "," + margin.top + ")");
  25.    
  26.   // Add X axis
  27.    var x = d3.scaleLinear()
  28.     .domain([1, 120])
  29.     .range([ 0, width ]);
  30.   var xAxis = SVG.append("g")
  31.     .attr("transform", "translate(0," + height + ")")
  32.     .call(d3.axisBottom(x));
  33.    
  34.   // Add Y axis
  35.    var y = d3.scaleLinear()
  36.     .domain([0, 39])
  37.     .range([ height, 0 ]);
  38.   var yAxis = SVG.append("g")
  39.     .call(d3.axisLeft(y));
  40.    
  41.   // Add a clipPath: everything out of this area won't be drawn.
  42.    var clip = SVG.append("defs").append("clipPath")
  43.       .attr("id", "clip")
  44.       .append("rect")
  45.       .attr("width", width )
  46.       .attr("height", height )
  47.       .attr("x", 0)
  48.       .attr("y", 0);
  49.    
  50.   // Create the scatter variable: where both the circles and the brush take place
  51.   var scatter = SVG.append('g')
  52.     .attr("clip-path", "url(#clip)")
  53.     
  54.   scatter
  55.     .selectAll("circle")
  56.     .data(data)
  57.     .enter()
  58.     .append("circle")
  59.       .attr("cx", function (d) { return x(d[0]); } )
  60.       .attr("cy", function (d) { return y(d[1]); } )
  61.       .attr("r", 5)
  62.       .style("fill", function (d) { return "black"; } )
  63.       .style("opacity", 0.5);
  65.    scatter.selectAll("a")
  66.   .data(data)
  67.   .enter().append("a")
  68.   //.attr({"xlink:href": "#"})
  69.   .on("click", function() { window.open("https://google.com"); })
  70.     .append("text")
  71.   .attr("x", (d) => x(d[0])+d[4])
  72.   .attr("y", (d) => y(d[1]))
  73.   .text((d) => d[3])
  74.   .style("fill", (d) => d[2]);
  76.   // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
  77.   var zoom = d3.zoom()
  78.       .scaleExtent([.5, 1000])  // This control how much you can unzoom (x0.5) and zoom (x20)
  79.       .extent([[0, 0], [width, height]])
  80.       .on("zoom", updateChart);
  82.   // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
  83.   SVG.append("rect")
  84.       .attr("width", width)
  85.       .attr("height", height)
  86.       .style("fill", "none")
  87.       .style("pointer-events", "all")
  88.       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  89.       .call(zoom);
  90.   
  91.   // now the user can zoom and it will trigger the function called updateChart
  93.   // A function that updates the chart when the user zoom and thus new boundaries are available
  94.   function updateChart() {
  96.     // recover the new scale
  97.     var newX = d3.event.transform.rescaleX(x);
  98.     var newY = d3.event.transform.rescaleY(y);
  100.     // update axes with these new boundaries
  101.     xAxis.call(d3.axisBottom(newX))
  102.     yAxis.call(d3.axisLeft(newY))
  104.     // update circle position
  105.     scatter
  106.       .selectAll("circle")
  107.       .attr('cx', function(d) {return newX(d[0])})
  108.       .attr('cy', function(d) {return newY(d[1])});
  109.     
  110.     scatter.selectAll("text")
  111.     .attr("x", (d) => newX(d[0])+d[4])
  112.     .attr("y", (d) => newY(d[1]))
  113.   }
  114. //})
  1. <head>
  2. <!-- Load d3.js -->
  3. <script src="https://d3js.org/d3.v4.js"></script>
  4. </head>
  6. <body></body>
英文:

I have a d3 js chart with zoom function. There are some labels on the chart. I want those labels to be clickable like href links. It looks like href is interfering with zoom function. Only either of href or zoom is working. Both are not working together. Only if I comment zoom code, href is working. And only if I comment href code, zoom is working. How to make both href and zoom working together?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var margin = {top: 10, right: 10, bottom: 20, left: 40},
  2. width = 450 - margin.left - margin.right,
  3. height = 380 - margin.top - margin.bottom;
  4. let data = [
  5. [95,&#39;0.7142914222463218&#39;,&#39;#0000FF&#39;,&#39;(535/535)&#39;,0,&quot;www.a.net&quot;],[97,&#39;1.5753396297416553&#39;,&#39;#00FF00&#39;,&#39;(267/267)&#39;,0,&quot;www.b.net&quot;],[97,&#39;3.965827978600963&#39;,&#39;#808080&#39;,&#39;(14/14)&#39;,0,&quot;www.c.net&quot;],[100,&#39;5.340348252548648&#39;,&#39;#FFAFAF&#39;,&#39;(7/8)&#39;,0,&quot;www.d.net&quot;],[100,&#39;5.699038509168024&#39;,&#39;#FFAFAF&#39;,&#39;(1/8)&#39;,0,&quot;www.e.net&quot;],[77,&#39;19.506535109626878&#39;,&#39;#FF0000&#39;,&#39;(5/5)&#39;,0,&quot;www.f.net&quot;],[77,&#39;19.506535109626878&#39;,&#39;#FF0000&#39;,&#39;(2/2)&#39;,42,&quot;www.g.net&quot;]]
  6. var SVG = d3.select(&quot;body&quot;)
  7. .append(&quot;svg&quot;)
  8. .attr(&quot;xmlns&quot;, &quot;http://www.w3.org/2000/svg&quot;)
  9. .attr(&quot;xlink&quot;, &quot;http://www.w3.org/1999/xlink&quot;)
  10. .attr(&quot;width&quot;, width + margin.left + margin.right)
  11. .attr(&quot;height&quot;, height + margin.top + margin.bottom)
  12. SVG.append(&quot;g&quot;)
  13. .attr(&quot;transform&quot;,
  14. &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  15. // Add X axis
  16. var x = d3.scaleLinear()
  17. .domain([1, 120])
  18. .range([ 0, width ]);
  19. var xAxis = SVG.append(&quot;g&quot;)
  20. .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
  21. .call(d3.axisBottom(x));
  22. // Add Y axis
  23. var y = d3.scaleLinear()
  24. .domain([0, 39])
  25. .range([ height, 0]);
  26. var yAxis = SVG.append(&quot;g&quot;)
  27. .call(d3.axisLeft(y));
  28. // Add a clipPath: everything out of this area won&#39;t be drawn.
  29. var clip = SVG.append(&quot;defs&quot;).append(&quot;SVG:clipPath&quot;)
  30. .attr(&quot;id&quot;, &quot;clip&quot;)
  31. .append(&quot;SVG:rect&quot;)
  32. .attr(&quot;width&quot;, width )
  33. .attr(&quot;height&quot;, height )
  34. .attr(&quot;x&quot;, 0)
  35. .attr(&quot;y&quot;, 0);
  36. // Create the scatter variable: where both the circles and the brush take place
  37. var scatter = SVG.append(&#39;g&#39;)
  38. .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;)
  39. scatter
  40. .selectAll(&quot;circle&quot;)
  41. .data(data)
  42. .enter()
  43. .append(&quot;circle&quot;)
  44. .attr(&quot;cx&quot;, function (d) { return x(d[0]); } )
  45. .attr(&quot;cy&quot;, function (d) { return y(d[1]); } )
  46. .attr(&quot;r&quot;, 5)
  47. .style(&quot;fill&quot;, function (d) { &quot;black&quot;; } )
  48. .style(&quot;opacity&quot;, 0.5);
  49. scatter.selectAll(&quot;a&quot;)
  50. .data(data)
  51. .enter().append(&quot;a&quot;)
  52. //.attr({&quot;xlink:href&quot;: &quot;#&quot;})
  53. .on(&quot;click&quot;, function() { window.open(&quot;https://google.com&quot;); })
  54. .append(&quot;text&quot;)
  55. .attr(&quot;x&quot;, (d) =&gt; x(d[0])+d[4])
  56. .attr(&quot;y&quot;, (d) =&gt; y(d[1]))
  57. .text((d) =&gt; d[3])
  58. .style(&quot;fill&quot;, (d) =&gt; d[2]);
  59. // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
  60. var zoom = d3.zoom()
  61. .scaleExtent([.5, 1000])  // This control how much you can unzoom (x0.5) and zoom (x20)
  62. .extent([[0, 0], [width, height]])
  63. .on(&quot;zoom&quot;, updateChart);
  64. // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
  65. SVG.append(&quot;rect&quot;)
  66. .attr(&quot;width&quot;, width)
  67. .attr(&quot;height&quot;, height)
  68. .style(&quot;fill&quot;, &quot;none&quot;)
  69. .style(&quot;pointer-events&quot;, &quot;all&quot;)
  70. .attr(&#39;transform&#39;, &#39;translate(&#39; + margin.left + &#39;,&#39; + margin.top + &#39;)&#39;)
  71. .call(zoom);
  72. // now the user can zoom and it will trigger the function called updateChart
  73. // A function that updates the chart when the user zoom and thus new boundaries are available
  74. function updateChart() {
  75. // recover the new scale
  76. var newX = d3.event.transform.rescaleX(x);
  77. var newY = d3.event.transform.rescaleY(y);
  78. // update axes with these new boundaries
  79. xAxis.call(d3.axisBottom(newX))
  80. yAxis.call(d3.axisLeft(newY))
  81. // update circle position
  82. scatter
  83. .selectAll(&quot;circle&quot;)
  84. .attr(&#39;cx&#39;, function(d) {return newX(d[0])})
  85. .attr(&#39;cy&#39;, function(d) {return newY(d[1])});
  86. scatter.selectAll(&quot;text&quot;)
  87. .attr(&quot;x&quot;, (d) =&gt; newX(d[0])+d[4])
  88. .attr(&quot;y&quot;, (d) =&gt; newY(d[1]))
  89. }
  90. //})

<!-- language: lang-html -->

  1. &lt;head&gt;
  2. &lt;!-- Load d3.js --&gt;
  3. &lt;script src=&quot;https://d3js.org/d3.v4.js&quot;&gt;&lt;/script&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;&lt;/body&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  5.     var margin = {top: 10, right: 10, bottom: 20, left: 40},
  6.         width = 450 - margin.left - margin.right,
  7.         height = 380 - margin.top - margin.bottom;
  9.     let data = [
  10.     	[95,'0.7142914222463218','#0000FF','(535/535)',0,"www.a.net"],[97,'1.5753396297416553','#00FF00','(267/267)',0,"www.b.net"],[97,'3.965827978600963','#808080','(14/14)',0,"www.c.net"],[100,'5.340348252548648','#FFAFAF','(7/8)',0,"www.d.net"],[100,'5.699038509168024','#FFAFAF','(1/8)',0,"www.e.net"],[77,'19.506535109626878','#FF0000','(5/5)',0,"www.f.net"],[77,'19.506535109626878','#FF0000','(2/2)',42,"www.g.net"]]
  12.     var SVG = d3.select("body")
  13.       .append("svg")
  14.         .attr("xmlns", "http://www.w3.org/2000/svg")
  15.         .attr("xlink", "http://www.w3.org/1999/xlink")
  16.         .attr("width", width + margin.left + margin.right)
  17.         .attr("height", height + margin.top + margin.bottom)
  18.         
  19.        SVG.append("g")
  20.         .attr("transform",
  21.               "translate(" + margin.left + "," + margin.top + ")");
  22.        
  23.       // Add X axis
  24.        var x = d3.scaleLinear()
  25.         .domain([1, 120])
  26.         .range([ 0, width ]);
  27.       var xAxis = SVG.append("g")
  28.         .attr("transform", "translate(0," + height + ")")
  29.         .call(d3.axisBottom(x));
  30.        
  31.       // Add Y axis
  32.        var y = d3.scaleLinear()
  33.         .domain([0, 39])
  34.         .range([ height, 0 ]);
  35.       var yAxis = SVG.append("g")
  36.         .call(d3.axisLeft(y));
  37.        
  38.       // Add a clipPath: everything out of this area won't be drawn.
  39.        var clip = SVG.append("defs").append("clipPath")
  40.           .attr("id", "clip")
  41.           .append("rect")
  42.           .attr("width", width )
  43.           .attr("height", height )
  44.           .attr("x", 0)
  45.           .attr("y", 0);
  46.        
  47.       // Create the scatter variable: where both the circles and the brush take place
  48.       var scatter = SVG.append('g')
  49.         .attr("clip-path", "url(#clip)")
  50.         
  51.       scatter
  52.         .selectAll("circle")
  53.         .data(data)
  54.         .enter()
  55.         .append("circle")
  56.           .attr("cx", function (d) { return x(d[0]); } )
  57.           .attr("cy", function (d) { return y(d[1]); } )
  58.           .attr("r", 5)
  59.           .style("fill", function (d) { "black"; } )
  60.           .style("opacity", 0.5);
  62.        scatter.selectAll(".textg")
  63.       .data(data)
  64.       .enter().append("g")
  65.       .attr('class','textg')
  66.       .style('cursor','pointer')
  67.       //.attr({"xlink:href": "#"})
  68.       .on("click", function() { window.open("https://google.com"); })
  69.       
  70.         .append("text")
  71.     //    .attr({x: (d) => x(d[0])+d[4], y: (d) => y(d[1])})
  72.       .attr("x", (d) => x(d[0])+d[4])
  73.       .attr("y", (d) => y(d[1]))
  74.       .text((d) => d[3])
  75.       .style("fill", (d) => d[2]);
  77.       // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
  78.       var zoom = d3.zoom()
  79.           .scaleExtent([.5, 1000])  // This control how much you can unzoom (x0.5) and zoom (x20)
  80.           .extent([[0, 0], [width, height]])
  81.           .on("zoom", updateChart);
  83.       // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
  84.       SVG.append("rect")
  85.           .attr("width", width)
  86.           .attr("height", height)
  87.           .style("fill", "none")
  88.           .style("pointer-events", "all")
  89.           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  90.           .call(zoom);
  91.           scatter.raise()
  92.       
  93.       // now the user can zoom and it will trigger the function called updateChart
  95.       // A function that updates the chart when the user zoom and thus new boundaries are available
  96.       function updateChart() {
  98.         // recover the new scale
  99.         var newX = d3.event.transform.rescaleX(x);
  100.         var newY = d3.event.transform.rescaleY(y);
  102.         // update axes with these new boundaries
  103.         xAxis.call(d3.axisBottom(newX))
  104.         yAxis.call(d3.axisLeft(newY))
  106.         // update circle position
  107.         scatter
  108.           .selectAll("circle")
  109.           .attr('cx', function(d) {return newX(d[0])})
  110.           .attr('cy', function(d) {return newY(d[1])});
  111.         
  112.         scatter.selectAll("text")
  113.         .attr("x", (d) => newX(d[0])+d[4])
  114.         .attr("y", (d) => newY(d[1]))
  115.         
  116.           scatter.raise()
  117.       }
  118.     //})
  120. <!-- language: lang-html -->
  122.     <head>
  123.     <!-- Load d3.js -->
  124.     <script src="https://d3js.org/d3.v4.js"></script>
  125.     </head>
  127.     <body></body>
  129. <!-- end snippet -->

请注意，上述内容包括HTML和JavaScript代码，已根据您的要求进行翻译。如果您需要进一步的帮助，请随时提问。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var margin = {top: 10, right: 10, bottom: 20, left: 40},
  2. width = 450 - margin.left - margin.right,
  3. height = 380 - margin.top - margin.bottom;
  4. let data = [
  5. [95,&#39;0.7142914222463218&#39;,&#39;#0000FF&#39;,&#39;(535/535)&#39;,0,&quot;www.a.net&quot;],[97,&#39;1.5753396297416553&#39;,&#39;#00FF00&#39;,&#39;(267/267)&#39;,0,&quot;www.b.net&quot;],[97,&#39;3.965827978600963&#39;,&#39;#808080&#39;,&#39;(14/14)&#39;,0,&quot;www.c.net&quot;],[100,&#39;5.340348252548648&#39;,&#39;#FFAFAF&#39;,&#39;(7/8)&#39;,0,&quot;www.d.net&quot;],[100,&#39;5.699038509168024&#39;,&#39;#FFAFAF&#39;,&#39;(1/8)&#39;,0,&quot;www.e.net&quot;],[77,&#39;19.506535109626878&#39;,&#39;#FF0000&#39;,&#39;(5/5)&#39;,0,&quot;www.f.net&quot;],[77,&#39;19.506535109626878&#39;,&#39;#FF0000&#39;,&#39;(2/2)&#39;,42,&quot;www.g.net&quot;]]
  6. var SVG = d3.select(&quot;body&quot;)
  7. .append(&quot;svg&quot;)
  8. .attr(&quot;xmlns&quot;, &quot;http://www.w3.org/2000/svg&quot;)
  9. .attr(&quot;xlink&quot;, &quot;http://www.w3.org/1999/xlink&quot;)
  10. .attr(&quot;width&quot;, width + margin.left + margin.right)
  11. .attr(&quot;height&quot;, height + margin.top + margin.bottom)
  12. SVG.append(&quot;g&quot;)
  13. .attr(&quot;transform&quot;,
  14. &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  15. // Add X axis
  16. var x = d3.scaleLinear()
  17. .domain([1, 120])
  18. .range([ 0, width ]);
  19. var xAxis = SVG.append(&quot;g&quot;)
  20. .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
  21. .call(d3.axisBottom(x));
  22. // Add Y axis
  23. var y = d3.scaleLinear()
  24. .domain([0, 39])
  25. .range([ height, 0]);
  26. var yAxis = SVG.append(&quot;g&quot;)
  27. .call(d3.axisLeft(y));
  28. // Add a clipPath: everything out of this area won&#39;t be drawn.
  29. var clip = SVG.append(&quot;defs&quot;).append(&quot;SVG:clipPath&quot;)
  30. .attr(&quot;id&quot;, &quot;clip&quot;)
  31. .append(&quot;SVG:rect&quot;)
  32. .attr(&quot;width&quot;, width )
  33. .attr(&quot;height&quot;, height )
  34. .attr(&quot;x&quot;, 0)
  35. .attr(&quot;y&quot;, 0);
  36. // Create the scatter variable: where both the circles and the brush take place
  37. var scatter = SVG.append(&#39;g&#39;)
  38. .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;)
  39. scatter
  40. .selectAll(&quot;circle&quot;)
  41. .data(data)
  42. .enter()
  43. .append(&quot;circle&quot;)
  44. .attr(&quot;cx&quot;, function (d) { return x(d[0]); } )
  45. .attr(&quot;cy&quot;, function (d) { return y(d[1]); } )
  46. .attr(&quot;r&quot;, 5)
  47. .style(&quot;fill&quot;, function (d) { &quot;black&quot;; } )
  48. .style(&quot;opacity&quot;, 0.5);
  49. scatter.selectAll(&quot;.textg&quot;)
  50. .data(data)
  51. .enter().append(&quot;g&quot;)
  52. .attr(&#39;class&#39;,&#39;textg&#39;)
  53. .style(&#39;cursor&#39;,&#39;pointer&#39;)
  54. //.attr({&quot;xlink:href&quot;: &quot;#&quot;})
  55. .on(&quot;click&quot;, function() { window.open(&quot;https://google.com&quot;); })
  56. .append(&quot;text&quot;)
  57. //    .attr({x: (d) =&gt; x(d[0])+d[4], y: (d) =&gt; y(d[1])})
  58. .attr(&quot;x&quot;, (d) =&gt; x(d[0])+d[4])
  59. .attr(&quot;y&quot;, (d) =&gt; y(d[1]))
  60. .text((d) =&gt; d[3])
  61. .style(&quot;fill&quot;, (d) =&gt; d[2]);
  62. // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
  63. var zoom = d3.zoom()
  64. .scaleExtent([.5, 1000])  // This control how much you can unzoom (x0.5) and zoom (x20)
  65. .extent([[0, 0], [width, height]])
  66. .on(&quot;zoom&quot;, updateChart);
  67. // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
  68. SVG.append(&quot;rect&quot;)
  69. .attr(&quot;width&quot;, width)
  70. .attr(&quot;height&quot;, height)
  71. .style(&quot;fill&quot;, &quot;none&quot;)
  72. .style(&quot;pointer-events&quot;, &quot;all&quot;)
  73. .attr(&#39;transform&#39;, &#39;translate(&#39; + margin.left + &#39;,&#39; + margin.top + &#39;)&#39;)
  74. .call(zoom);
  75. scatter.raise()
  76. // now the user can zoom and it will trigger the function called updateChart
  77. // A function that updates the chart when the user zoom and thus new boundaries are available
  78. function updateChart() {
  79. // recover the new scale
  80. var newX = d3.event.transform.rescaleX(x);
  81. var newY = d3.event.transform.rescaleY(y);
  82. // update axes with these new boundaries
  83. xAxis.call(d3.axisBottom(newX))
  84. yAxis.call(d3.axisLeft(newY))
  85. // update circle position
  86. scatter
  87. .selectAll(&quot;circle&quot;)
  88. .attr(&#39;cx&#39;, function(d) {return newX(d[0])})
  89. .attr(&#39;cy&#39;, function(d) {return newY(d[1])});
  90. scatter.selectAll(&quot;text&quot;)
  91. .attr(&quot;x&quot;, (d) =&gt; newX(d[0])+d[4])
  92. .attr(&quot;y&quot;, (d) =&gt; newY(d[1]))
  93. scatter.raise()
  94. }
  95. //})

<!-- language: lang-html -->

  1. &lt;head&gt;
  2. &lt;!-- Load d3.js --&gt;
  3. &lt;script src=&quot;https://d3js.org/d3.v4.js&quot;&gt;&lt;/script&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;&lt;/body&gt;

<!-- end snippet -->

Hello, i think your problem is that d3.zoom is putting e rect to capture mouse events.

So one solution is to put the &lt;g/&gt; on top of the rect so you can click your elements.

Luckily d3 has an easy way to bring an element to the top:
scatter.raise()

Click doesn't work on sniper because you can't open a new window on snippet sandbox, however you can see the cursor change on text over

huangapple
  • 本文由 发表于 2023年8月5日 00:08:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76837583.html
  • d3.js
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定